Hej!
Sökte runt på forumet och hittade väl på sätt och vis vad jag sökte, men jag lyckas inte få till det.
Hursomhelst..
Vad jag frösöker få att fungera är ett formulär med flera olika SELECTs. När man gjort ett val i en SELECT vill jag visa en table, med ett speciell id, gör man nytt val så ska den gamla tabeln gömmas och nya visas.
Typ:
<SELECT NAME="dryck" OnChange="nåttsomjagintevet">
<OPTION VALUE="mjolk">Mjölk</OPTION>
<OPTION VALUE="saft">Saft</OPTION>
</SELECT
<TABLE ID="mjolk">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="mjolktillverkare"><br>
Mängd: <INPUT TYPE="text" name="mjolkmangd"><br>
</TD></TR>
</TABLE>
<TABLE ID="saft">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="safttillverkare"><br>
Mängd: <INPUT TYPE="text" name="saftmangd"><br>
Smak: <INPUT TYPE="text" name="saftsmak">
</TD></TR>
</TABLE>
<SELECT NAME="godis" OnChange="nåttsomjagintevet">
<OPTION VALUE="choklad">Choklad</OPTION>
<OPTION VALUE="tuggummi">tuggummi</OPTION>
</SELECT
<TABLE ID="choklad">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="chokladtillverkare"><br>
Mängd: <INPUT TYPE="text" name="chokladmangd"><br>
Typ: <SELECT NAME="chokladfarg">
<OPTION VALUE="ljus">Ljus</OPTION>
<OPTION VALUE="mork">Mörk</OPTION>
</TD></TR>
</TABLE>
<TABLE ID="tuggummi">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="tuggummi"><br>
Mängd: <INPUT TYPE="text" name="tuggummimangd"><br>
Smak: <INPUT TYPE="text" name="tuggummismak">
</TD></TR>
</TABLE>
Hänger ni med?
Vill kunna ha hur många selectfält osv som helst (iaf mer än 5).
Någon som sitter inne med en bra lösning?
Edit: Vill givetvis att de table id's som man redan markerat i selecten för att visas ska visas när man ändrar i en select längre ner. Väljer man Saft och sen tuggummi så ska fortfarande saft visas. Har sett ett flertal script som stänger saft när man väljer tuggummi..
Lite snabbt, men det funkar. Kom ihåg att id'na dryck0, dryck1 osv måste vara på den formen, du kan alltså inte välja namn på dem själv.
<script>
function showTable(th){
// alert(th.options[th.selectedIndex].value)
for(i=0; tableref = document.getElementById(th.name + i);i++){
// alert(tableref.innerHTML)
if ((th.name + i) == th.options[th.selectedIndex].value)
tableref.style.display="block";
else
tableref.style.display="none";
}
}
function loadPage(){
showTable(document.forms.theform.dryck);
showTable(document.forms.theform.godis);
// showTable(document.forms.theform);
}
</script>
<body onload="loadPage();">
<form name="theform">
<SELECT NAME="dryck" onchange="showTable(this);">
<OPTION VALUE="dryck0">Mjölk</OPTION>
<OPTION VALUE="dryck1">Saft</OPTION>
</SELECT>
<TABLE ID="dryck0">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="mjolktillverkare"><br>
Mängd: <INPUT TYPE="text" name="mjolkmangd"><br>
</TD></TR>
</TABLE>
<TABLE ID="dryck1">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="safttillverkare"><br>
Mängd: <INPUT TYPE="text" name="saftmangd"><br>
Smak: <INPUT TYPE="text" name="saftsmak">
</TD></TR>
</TABLE>
<!------------------------------------------------------------>
<SELECT NAME="godis" onchange="showTable(this);">
<OPTION VALUE="godis0">Choklad</OPTION>
<OPTION VALUE="godis1">tuggummi</OPTION>
</SELECT>
<TABLE ID="godis0">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="chokladtillverkare"><br>
Mängd: <INPUT TYPE="text" name="chokladmangd"><br>
Typ: <SELECT NAME="chokladfarg">
<OPTION VALUE="ljus">Ljus</OPTION>
<OPTION VALUE="mork">Mörk</OPTION>
</TD></TR>
</TABLE>
<TABLE ID="godis1">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="tuggummi"><br>
Mängd: <INPUT TYPE="text" name="tuggummimangd"><br>
Smak: <INPUT TYPE="text" name="tuggummismak">
</TD></TR>
</TABLE>
</form>
</body>
Kan det vara något liknande som du söker?
http://www.koposalj.net/startfrm.php
om du dubbelckickar på dom små bilderna längst upp så får du en selektlista laddad med underkategorin för just den bilden. Eller om du väljer kategori i första selektlistan så för du samma funktion. Selektlistorna laddas i det här fallet från en databas.
Kodne jag fick från nitro fungerade riktigt bra, problemet var bara när jag la till ytterliggare en SELECT i tablen som visades.
Vad jag är ute efter är alltså:
En select som öppnar en table och visar en ny select (viktigt att det kommer fram en table, för det är mer information som ska visas). koden nitro skrev fungerar precis så långt.
I den tablen vill jag visa lite olika saker samt en ny SELECT.
Väljer man ngt i dne andra selecten så ska båda tablen visas.
förstår ni?
Min tanke var att man sparar ner namnet på förra tablen som stod öppen, och öppnar både den och den nya, men jag lyckas inte riktigt.
<style>
table {margin-left: 20px;}
</style>
<script>
function showTable(th){
// alert(th.options[th.selectedIndex].value)
for(i=0; tableref = document.getElementById(th.name + i);i++){
// alert(tableref.innerHTML)
if ((th.name + i) == th.options[th.selectedIndex].value)
tableref.style.display="block";
else
tableref.style.display="none";
}
}
function loadPage(){
showTable(document.forms.theform.dryck);
showTable(document.forms.theform.godis);
showTable(document.forms.theform.vad);
showTable(document.forms.theform.chokladfarg);
// showTable(document.forms.theform);
}
</script>
<body onload="loadPage();">
<form name="theform">
<SELECT NAME="vad" onchange="showTable(this);">
<OPTION VALUE="vad0">Någonting att dricka?</OPTION>
<OPTION VALUE="vad1">Eller kanske äta?</OPTION>
</SELECT>
<SELECT NAME="dryck" onchange="showTable(this);">
<OPTION VALUE="dryck0">Mjölk</OPTION>
<OPTION VALUE="dryck1">Saft</OPTION>
</SELECT>
<TABLE ID="vad0">
</TR><TD>
<TABLE ID="dryck0">
<TR><TD>
Tillverkare: <INPUT TYPE="text" name="mjolktillverkare"><br>
Mängd: <INPUT TYPE="text" name="mjolkmangd"><br>
</TD></TR>
</TABLE>
<TABLE ID="dryck1">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="safttillverkare"><br>
Mängd: <INPUT TYPE="text" name="saftmangd"><br>
Smak: <INPUT TYPE="text" name="saftsmak">
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
<!------------------------------------------------------------>
<TABLE ID="vad1">
</TR><TD>
<SELECT NAME="godis" onchange="showTable(this);">
<OPTION VALUE="godis0">Choklad</OPTION>
<OPTION VALUE="godis1">tuggummi</OPTION>
</SELECT>
<TABLE ID="godis0">
<TR><TD>
Tillverkare: <INPUT TYPE="text" name="chokladtillverkare"><br>
Mängd: <INPUT TYPE="text" name="chokladmangd"><br>
Typ: <SELECT NAME="chokladfarg" onchange="showTable(this);">
<OPTION VALUE="chokladfarg0">Ljus</OPTION>
<OPTION VALUE="chokladfarg1">Mörk</OPTION>
</SELECT>
<TABLE ID="chokladfarg0">
<TR><TD>
Typ av ljus choklad: <SELECT NAME="ljustyp">
<OPTION VALUE="ljustyp0">Utan hasselnötter</OPTION>
<OPTION VALUE="ljustyp1">Med hasselnötter</OPTION>
<OPTION VALUE="ljustyp2">Vit choklad</OPTION>
</SELECT>
</TD></TR>
</TABLE>
<TABLE ID="chokladfarg1">
<TR><TD>
Typ av mörk choklad: <SELECT NAME="morktyp">
<OPTION VALUE="morktyp0">70% kakao</OPTION>
<OPTION VALUE="morktyp1">75% kakao</OPTION>
<OPTION VALUE="morktyp2">99% kakao</OPTION>
</SELECT>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
<TABLE ID="godis1">
</TR><TD>
Tillverkare: <INPUT TYPE="text" name="tuggummi"><br>
Mängd: <INPUT TYPE="text" name="tuggummimangd"><br>
Smak: <INPUT TYPE="text" name="tuggummismak">
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</form>
</body>
Nu fattar jag inte. Kolla detta nya exempel. Och så måste du lägga till nya selectar i loadPage.
Det ser väldigt rätt ut, ska provköra det lite till.. Är det rätt så kommer jag tillbaka och accepterar ditt svar =)
