select change
У меня есть селект.
<select class="select"> <option>Երևան</option> <option>Երևանի արվարձաններ</option> <option disabled="disabled">-----------------------------------</option> <option>Արագածոտն</option> <option>Արարատ</option> <option>Արմավիր</option> <option>Գեղարքունիք</option> <option>Լոռի</option> <option>Կոտայք</option> <option>Շիրակ</option> <option>Սյունիք</option> <option>Վայոց Ձոր</option> <option>Տավուշ</option> </select> так же див.. (и таких много) <div id="erevan"> <p><input type='checkbox' class="ray" name='poqr_kentron' />Փոքր Կենտրոն</p> <p><input type='checkbox' class="ray" name='arabik' />Արաբկիր</p> <p><input type='checkbox' class="ray" name='mec_kentron' />Մեծ Կենտրոն</p> <p><input type='checkbox' class="ray" name='ajapnyak' />Աջափնյակ</p> <p><input type='checkbox' class="ray" name='davtashen' />Դավթաշեն</p> <p><input type='checkbox' class="ray" name='qanaqer' />Քանաքեռ-Զեյթուն</p> <p><input type='checkbox' class="ray" name='nor_norq' />Նոր Նորք</p> <p><input type='checkbox' class="ray" name='avan' />Ավան</p> <p><input type='checkbox' class="ray" name='malatia' />Մալաթիա-Սեբաստիա</p> <p><input type='checkbox' class="ray" name='shengavit' />Շենգավիթ</p> <p><input type='checkbox' class="ray" name='erebuni' />Էրեբունի</p> <p><input type='checkbox' class="ray" name='nubarashen' />Նուբարաշեն</p> </div> у него поставлен display:none; Я хочу сделать так, когда кликаеться на первую опцию, появляеться этот див(display:block), если другой, то отображаеться другой.. Я это представляю так..
$('.select').change(function() {
var sel = $('.select').val();
if(sel == 'Երևան') {
$('#erevan').css('display','block');
}
});
Такой способ не работает, помогите решит ь проблему.. Благодарю |
Marker,
добавьте value в option с id и добавьте класс hide во все дивы тогда возможен такой вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.hide{
display: none;
}
-->
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('.select').change(function() {
var sel = $('.select').val();
$(".hide").hide()
$("#"+sel).show();
});
});
</script>
</head>
<body>
<select class="select">
<option value="erevan">Երևան</option>
<option>Երևանի արվարձաններ</option>
<option disabled="disabled">-----------------------------------</option>
<option>Արագածոտն</option>
<option>Արարատ</option>
<option>Արմավիր</option>
<option>Գեղարքունիք</option>
<option>Լոռի</option>
<option>Կոտայք</option>
<option>Շիրակ</option>
<option>Սյունիք</option>
<option>Վայոց Ձոր</option>
<option>Տավուշ</option>
</select>
<div id="erevan" class="hide">
<p><input type='checkbox' class="ray" name='poqr_kentron' />Փոքր Կենտրոն</p>
<p><input type='checkbox' class="ray" name='arabik' />Արաբկիր</p>
<p><input type='checkbox' class="ray" name='mec_kentron' />Մեծ Կենտրոն</p>
<p><input type='checkbox' class="ray" name='ajapnyak' />Աջափնյակ</p>
<p><input type='checkbox' class="ray" name='davtashen' />Դավթաշեն</p>
<p><input type='checkbox' class="ray" name='qanaqer' />Քանաքեռ-Զեյթուն</p>
<p><input type='checkbox' class="ray" name='nor_norq' />Նոր Նորք</p>
<p><input type='checkbox' class="ray" name='avan' />Ավան</p>
<p><input type='checkbox' class="ray" name='malatia' />Մալաթիա-Սեբաստիա</p>
<p><input type='checkbox' class="ray" name='shengavit' />Շենգավիթ</p>
<p><input type='checkbox' class="ray" name='erebuni' />Էրեբունի</p>
<p><input type='checkbox' class="ray" name='nubarashen' />Նուբարաշեն</p>
</div>
</body>
</html>
|
$(document).ready(function(e) {
$('#mySelect').change(function(){
var id = $(this).data("section");
$('#'+id).show();
});
e.preventDefault();
});
<select name="mySelect" id="mySelect"> <option value="0" data-section="item1">item1</option> <option value="1" data-section="item2">item2</option> </select> <div id="item1" style="display:none;"> text1 </div> <div id="item2" style="display:none;"> text2 </div> |
| Часовой пояс GMT +3, время: 05:11. |