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
<form> <select name="id_druh_material" class="main form-control custom-select" id="validationCustom01" placeholder="Druh materialu" required> <option value="">Druh materialu</option> <option value="1">pena</option> <option value="2">koža</option> <option value="3">tkanina</option> <option value="4">úplet</option> <option value="5">podšívka</option> </select> <select name="id_material[1]" id="validationCustom02" placeholder="Nazov materialu" class="form-control custom-select models model-1"> <option value="">Vyber</option> <option value="1">150cm/S284M/5,2mm</option> <option value="2">150cm/S284M/8mm</option> <option value="3">152cm/S364M/4,8mm</option> <option value="4">152cm/S364M/7,8mm</option> <option value="5">157cm/S284M/3mm</option> <option value="6">157cm/S284M/4mm</option> <option value="7">157cm/S284M/5mm</option> <option value="8">157cm/S284M/8mm</option> <option value="9">164cm/S284M/3mm</option> <option value="10">164cm/S284M/4mm</option> <option value="11">164cm/S284M/5mm</option> <option value="12">164cm/S284M/8mm</option> <option value="13">164cm/S284M/15mm</option> <option value="14">164cm/S364M/4,8mm</option> <option value="15">164cm/S364M/7,8mm</option> <option value="16">184cm/S284M/3mm</option> <option value="17">184cm/S284M/4mm</option> <option value="18">184cm/S284M/5mm</option> <option value="19">184cm/S284M/8mm</option> <option value="20">184cm/S284M/15mm</option> <option value="21">184cm/S284M/20mm</option> <option value="22">184cm/S364M/4,8mm</option> <option value="23">184cm/S364M/7,8mm</option> <option value="24">204cm/S364M/4,8mm</option> <option value="25">167cm/S224M/5mm</option> <option value="26">150cm/S284M/4mm</option> <option value="27">150cm/SF495MD/6,7mm</option> <option value="28">155cm/454DH/2.8mm</option> <option value="59">152cm/S2430/9mm</option> <option value="60">154cm/EasyLam40/B02E</option> <option value="61">155cm/EasyLam32/3mm</option> <option value="62">155cm/EasyLam32/4mm</option> <option value="63">155cm/EasyLam32/8mm</option> <option value="64">183cm/EasyLam40/FA</option> <option value="65">B 42 BLE-LF - A</option> </select> <select name="id_material[2]" id="validationCustom02 " placeholder="Nazov materialu " class="form-control custom-select models model-2"> <option value="">Vyber</option> <option value="29">F60 - British OAK </option> <option value="30">F60 - Carbon Black</option> <option value="31">F60 - Malt Brown</option> <option value="32">F60 - Satellite grey</option> <option value="33">F60 - Dinamica Stretch</option> <option value="34">MFA - PVC Acella / como</option> <option value="35">MFA - PVC Acella / greige</option> <option value="36">MFA - PVC Acella / cortecca</option> <option value="66">koza/z</option> </select> <select name="id_material[3]" id="validationCustom02" placeholder="Nazov materialu" class="form-control custom-select models model-3"> <option value="">Vyber</option> <option value="68 ">tkanina/z</option> <option value="69 ">n/a/t</option> </select> <select name="id_material[4]" id="validationCustom02 " placeholder="Nazov materialu " class="form-control custom-select models model-4"> <option value="">Vyber</option> <option value="37">Popco/3-2</option> <option value="38">Popco/1-2</option> <option value="39">Popco/11-6</option> <option value="40">Popco/3-2 - BEZ</option> <option value="41">Popco/15-K</option> <option value="42">Popco/14-F</option> <option value="43">94122/3-2</option> <option value="44">94122/1-2</option> <option value="45">94122/11-6</option> <option value="46">94122/3-2 BEZ</option> <option value="47">94122/14-F</option> <option value="48">94122/15-K</option> <option value="49">92585/tmavé</option> <option value="50">92585/bledé</option> <option value="51">92585/zelené</option> <option value="52">92585/modré</option> <option value="53">92585/červené</option> </select> <select name="id_material[5]" id="validationCustom02" placeholder="Nazov materialu" class="form-control custom-select models model-5"> <option value="">Vyber</option> <option value="54">95013/170</option> <option value="55">95050/195</option> <option value="56">90475/160</option> <option value="57">94082/160</option> <option value="58">94102</option> <option value="67">n/a/p</option> </select> <input type=submit value="odeslat"> </form>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
select.models{ display:none; } select.models.active{ display:inline-block; }
CSS
Autoformát
CSS reset
Až na konci
$(function(){ $("select.main").on("change", function(){ //remove active $("select.models.active").removeClass("active"); //check if select vlass exists..if it does show it var subList = $("select.models.model-"+$(this).val()); if (subList.length){ //it does! show it by adding active class to it subList.addClass("active"); } }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>