Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<select name="kategorie"> <option value="0">Vyberte si ...</option> <option value="1" data-depend="sekce1">Jídlo a pití</option> <option value="2" data-depend="sekce2">Oblečení a móda</option> </select> <select name="podkategorie" id="sekce1"> <option value="50">Káva a dezerty</option> <option value="49">Pizza</option> <option value="51">Steaky a maso</option> <option value="48">Sushi</option> </select> <select name="podkategorie" id="sekce2"> <option value="20" data-depend="podsekce1">Pánské plavky</option> <option value="4">Pánské spodní prádlo a pyžama</option> <option value="14">Pánské trička</option> <option value="16">Svetry, roláky a pulovry</option> </select> <select name="podpodkategorie" id="podsekce1"> <option value="200">Modré</option> <option value="403">Růžové</option> <option value="141">Se slonem</option> <option value="166">S veverkou</option> </select>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
function setVisible(sel, visible) { if (visible) { sel.style.display = null; var name = sel.getAttribute('data-name'); sel.name = name; } else { sel.style.display = 'none'; sel.name = ''; } selectChanged.call(sel); } function selectChanged() { var visible = this.style.display != 'none'; for (var i = 0; i < this.options.length; i++) { var opt = this.options[i]; if (opt.hasAttribute('data-depend')) { var depId = opt.getAttribute('data-depend'); var dep = document.getElementById(depId); setVisible(dep, visible && opt.selected); } } } function initSelect(select) { select.onchange = selectChanged; select.setAttribute('data-name', select.name); } function initSelects() { var selects = document.getElementsByTagName('select'); var i; for (i = 0; i < selects.length; i++) { initSelect(selects[i]); } for (i = 0; i < selects.length; i++) { selectChanged.call(selects[i]); } } initSelects();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>