показать div соответствующий опции select
Добрый вечер. Есть такой вопрос:
вот такой код: <select name="cena" id="test"> <option value="selectsize">выберите размер</option> <option id="block1" value="1680">1/60</option> <option id="block2" value="3360">2/60</option> <option id="block3" value="4939.20">3/60</option> <option id="block4" value="6585.60">4/60</option> <option id="block5" value="8064">5/60</option> </select> <div class="block1"></div> <div class="block2"></div> <div class="block3"></div> <div class="block4"></div> <div class="block5"></div> divы скрыты через display:none Подскажите, как при выборе опции с id="blockN" показать div с таким же классом? |
<select name="cena" id="test">
<option value="selectsize" disabled>выберите размер</option>
<option id="block1" value="1680">1/60</option>
<option id="block2" value="3360">2/60</option>
<option id="block3" value="4939.20">3/60</option>
<option id="block4" value="6585.60">4/60</option>
<option id="block5" value="8064">5/60</option>
</select>
<div class="block1">1</div>
<div class="block2">2</div>
<div class="block3">3</div>
<div class="block4">4</div>
<div class="block5">5</div>
<script src="http://yandex.st/jquery/1.6.0/jquery.min.js"></script>
<script>
var divs = $( "div[class^='block']" ).hide();
$("#test").bind('change',function(){
divs.hide().filter("div."+this[ this.selectedIndex ].id ).show();
});
</script>
|
К сожалению такой вариант не подхоит - надо показывать именно див с классом равным айди опции, а не тот же по порядку.
Грубо говоря, в написанном вами варианте, если верстка усложняется или дивы меняются местами - результат получается неправильный. |
пофиксил
|
Спасибо большое за помощь.
|
Отличный вариант!
А такой-же вариант, но применительно к Checkbox (Radio) вместо Select?
|
| Часовой пояс GMT +3, время: 21:26. |