Ahoj kamarádi,
mám prosbu, v JS je pro mne krapet velké moře a já plavu asi blbým směrem....
Vytvářím <form>, který má zobrazovat elemety (input, select atd..) podle toho co v předchozím elementu vybereš.
Takže zkráceně řečeno:
Vyberu si materiál např kov, a v JS nastavím, že jestliže je vybraný 1.řádek, tak v CSS stylech zobraz DIV id="div-material-kov".
HTML:
To mi sice funguje, ale pouze za předpokladu, že v JavaScriptu mám jednotlivé funkce pod sebou.Kód:<select id="material" onChange="check1(this);" name="material"> <option value="">Vyberte materiál:</option> <option value="kov">kov</option> <option value="plast">plast</option> <option value="drevo">dřevo</option> <option value="papir">papír</option> </select> <div id="div-material-kov" style="display:none;"> <select id="kov" onChange="check2(this);" name="kov"> <option value="">Jaký typ kovu ?</option> <option value="hlinik">Hliník</option> <option value="ocel">Ocel</option> <option value="zinek">Zinek</option> </select> </div> <div id="div-material-drevo" style="display:none;"> <select id="drevo" onChange="check3(this);" name="drevo"> <option value="">Jaký druh dřeva ?</option> <option value="buk">Buk</option> <option value="dub">Dub</option> <option value="javor">Javor</option> </select> </div>
Ovšem pokud je to pod sebou, pak html FORM posílá všechny výsledky a nikoliv jen ty uživatelem vybrané.
SCRIPT:
Samozřejmě, že je možné, že to celé řeším zbytečně mooooc složitě a že daleko jednodušší by bylo udělat jinak. Ovšem jak?Kód:function check1(elem) { if (elem.selectedIndex == 1) { document.getElementById("div-material-kov").style.display = 'block'; document.getElementById("div-material-plast").style.display = 'none'; document.getElementById("div-material-drevo").style.display = 'none'; document.getElementById("div-material-papir").style.display = 'none'; } else { document.getElementById("div-material-kov").style.display = 'none'; } if (elem.selectedIndex == 3) { document.getElementById("div-material-kov").style.display = 'none'; document.getElementById("div-material-plast").style.display = 'none'; document.getElementById("div-material-drevo").style.display = 'block'; document.getElementById("div-material-papir").style.display = 'none'; } else { document.getElementById("div-material-drevo").style.display = 'none'; } } function check2(elem) { if (elem.selectedIndex == 1) { document.getElementById("div-material-drevo-buk").style.display = 'block'; document.getElementById("div-material-drevo-dub").style.display = 'none'; document.getElementById("div-material-drevo-javor").style.display = 'none'; } else { document.getElementById("div-material-drevo-buk").style.display = 'none'; } if (elem.selectedIndex == 2) { document.getElementById("div-material-drevo-buk").style.display = 'none'; document.getElementById("div-material-drevo-dub").style.display = 'block'; document.getElementById("div-material-drevo-javor").style.display = 'none'; } else { document.getElementById("div-material-drevo-dub").style.display = 'none'; } }
Přičemž FORM bude ještě obsahovat ALERTY, pokud nějaké políčko nebude zvolené nebo vyplněné.