首页 > 建站教程 > JS、jQ、TS >  jQuery获取选中的option的索引正文

jQuery获取选中的option的索引

今天,做项目时,有个需求,需要在select值改变时,获取当前选中option的外面的optgroup的值。
思路很清楚,得到当前选中的option,然后通过jQuery的parent选中它的父节点,即可。
下面这三个方法,可以获取当前选中的option的索引值:
$('select').prop('selectedIndex');
$('option:selected', 'select').index();
$('select option').index($('select option:selected'))
下面是案例:
<select>
 <optgroup label="安徽">
 <option>合肥</option>
 <option>阜阳</option>
 <option>六安</option>
 </optgroup>
 <optgroup label="浙江">
 <option>宁波</option>
 <option>杭州</option>
 <option>苏州</option>
 </optgroup>
</select>
<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script>
<script>
 $("select").change(function(){
 alert("选中的option的值:"+$(this).val());
 var selectedIdx = $(this).prop('selectedIndex');
 var parent = $("select option").eq(selectedIdx).parent();
 alert("选中的optgroup的值:"+parent.attr("label"));
 })
</script>