Май
7
2013
7
2013
JavaScript // jQuery /
Связанные Select-ы
Простой пример того как сделать связанные списки. Думаю комментарии излишне.
Сами Селекторы.
<select name="select1" id="select1" onchange="change_select(this)"> <option value="Хакасия" selected="">Хакасия</option> <option disabled="disabled" class="opt-group">-- Города --</option> <option value="Абакан" >Абакан</option> <option value="Абаза">Абаза</option> <option value="Аскиз">Аскиз</option> </select> <select name="select2" id="select2" onchange="change_select(this)" style="display:none"> <option value=21>secet21</option> <option value=22>secet22</option> <option value=23>secet23</option> <option value=24>secet24</option> </select> <select name="select3" id="select3" onchange="change_select(this)" style="display:none"> <option value=31>secet31</option> <option value=32>secet32</option> <option value=33>secet33</option> <option value=34>secet34</option> </select> <select name="select4" id="select4" onchange="change_select(this)" style="display:none"> <option value=41>secet41</option> <option value=42>secet42</option> <option value=43>secet43</option> <option value=44>secet44</option> </select> <select name="select5" id="select5" onchange="change_select(this)" style="display:none"> <option value="">Тип кузова</option> <option value="4200">Седан</option> <option value="4203">Хетчбэк</option> <option value="4201">Универсал</option> <option value="4808">Внедорожник</option> <option value="4196">Кабриолет</option> <option value="4809">Кроссовер</option> <option value="4197">Купе</option> <option value="4198">Лимузин</option> <option value="4810">Минивэн</option> <option value="4199">Пикап</option> <option value="4202">Фургон</option> </select>
JavaScript код.
<script type="text/javascript"> function change_select(elem) { switch (elem.value) { case 'Абакан': document.getElementById('select4').style.display= 'none'; document.getElementById('select3').style.display= 'none'; document.getElementById('select2').style.display = 'inline'; break; case 'Абаза': document.getElementById('select4').style.display= 'none'; document.getElementById('select3').style.display= 'inline'; document.getElementById('select2').style.display = 'none'; break; case 'Аскиз': document.getElementById('select2').style.display = 'none' document.getElementById('select3').style.display= 'none'; document.getElementById('select4').style.display = 'inline'; break; case '42': document.getElementById('select2').style.display = 'none' document.getElementById('select3').style.display= 'none'; document.getElementById('select4').style.display = 'inline'; document.getElementById('select5').style.display = 'inline'; break; default: // document.getElementById('select2').style.display = 'none'; // document.getElementById('select3').style.display = 'none'; // document.getElementById('select4').style.display= 'none'; } } </script>