我有一个select和2个optgroups。是否有方法仅在选择第一个optgroup中的选项时调用函数,如果选择了第二个optgroup中的选项,则调用另一个函数?Jquery - 在select中选择optgroup
7
A
回答
26
当然。
HTML:
What is your preferred vacation spot?<br>
<SELECT ID="my_select">
<OPTGROUP LABEL="OptGroup One." id="one">
<OPTION LABEL="Florida">Florida</OPTION>
<OPTION LABEL="Hawaii">Hawaii</OPTION>
<OPTION LABEL="Jersey">Jersey Shore</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="OptGroup Two" id="two">
<OPTION LABEL="Paris">Paris</OPTION>
<OPTION LABEL="London">London</OPTION>
<OPTION LABEL="Florence">Florence</OPTION>
</OPTGROUP>
</SELECT>
JS:
$("#my_select").change(function(){
var selected = $("option:selected", this);
if(selected.parent()[0].id == "one"){
//OptGroup 1, do something here..
} else if(selected.parent()[0].id == "two"){
//OptGroup 2, do something here
}
});
1
$('#selectID').change(function(){
var $option = $('option:selected', this); // get selected option
var optGroup = $option.closest('optgroup').index(); // get which optgroup
if(optGroup == 0){
// first
}
else if(optGroup == 1){
// second
}
else{
// not first or second
}
});
0
当你点击选项,你会得到选项组的ID名称。
var obj = {};
$('select[name=queue]').on('change', function() {
obj = {};
var options = $('option:selected', this); //the selected options
$.each(options, function (index, option) {
var optgroupIndex = $(option).closest('optgroup').index() //get the index
var optgroupId = $(option).parent()[0].id //get id
if (obj.hasOwnProperty(optgroupId)) {
obj[optgroupId].push($(option).val());
} else {
obj[optgroupId] = [$(option).val()];
}
});
var textRows = [];
$.each(obj, function(optgroupId, values){
textRows.push(optgroupId +": " + values.join(', '));
});
$('#demo').html(textRows.join("<br>"));
});
/*Additional*/
select::-webkit-scrollbar {display:none;}
select::-moz-scrollbar {display:none;}
select::-o-scrollbar {display:none;}
select::-google-ms-scrollbar {display:none;}
select::-khtml-scrollbar {display:none;}
select{height:150px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='queue' multiple>
<optgroup label="Frist Queue" id="Frist Queue">
<option value="Person1">Person1</option>
<option value="Person2">Person2</option>
<option value="Person3">Person3</option>
</optgroup>
<optgroup label="Second Queue" id="Second Queue">
<option value="Person1">Person1</option>
<option value="Person2">Person2</option>
</optgroup>
</select>
<div id="demo"></div>
相关问题
- 1. 有没有办法在select标签中选择optgroup的标签?
- 2. jQuery的OPTGROUP和选择价值
- 3. jQuery的选择2显示OPTGROUP标签
- 4. jquery get select()选择
- 5. 在vue 1.x中选择`optgroup`
- 6. ZF在选择中禁用optgroup标签
- 7. 使用Selenium在optgroup上选择选项
- 8. optgroup选择组的标题
- 9. jQuery选择器:多重选择vs select
- 10. optgroup上的jQuery筛选器
- 11. jquery .select在选择菜单中选择功能?
- 12. jQuery select src选择图片
- 13. JQuery没有选择SELECT
- 14. Symfony2中形成与选择不OPTGROUP
- 15. jQuery隐藏/在主选择器上显示optgroup base
- 16. Ruby从选择列表中选择随机元素与optgroup
- 17. 在oracle中多选择SELECT
- 18. Optgroup + value multiple select with selected2?
- 19. 无法选择JQuery(Mobile)/ JavaScript Select选项
- 20. jQuery的wrapAll选择OPTGROUP选项使用一个简单的<code>select</code>的值
- 21. JQuery-无法在select元素中选择一个选项?
- 22. 使用Javascript或jQuery在select元素中选择一个选项
- 23. jQuery的填充OPTGROUP为第二选择框动态
- 24. 使用jsp创建选择使用optgroup
- 25. 将struts2的列表选择为optgroup
- 26. 展开/收起多选择标签(OPTGROUP)
- 27. 使用optgroup设置选择值knockoutjs
- 28. Django模型作为optgroup选择
- 29. 将HTML选择/ optgroup转换为Flex
- 30. 在选择框中快速选择整个optgroup的简单方法
惊人。代码看起来非常清晰和容易,但我在这方面挣扎如此之多。谢谢! – user495915 2011-03-29 15:50:19
+1因为比我快。 – 2011-03-29 15:51:31