Jquery - 在选择中选择 optgroup
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5475003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery – Select optgroup in select
提问by user495915
I have a select with 2 optgroups. Is there a way to call an function only if an option from the first optgroup is selected and call another function if an option from the second optgroup is selected?
我有一个带有 2 个 optgroup 的选择。有没有办法仅在选择第一个 optgroup 中的选项时调用函数，并在选择第二个 optgroup 中的选项时调用另一个函数？
回答by mattsven
Sure.
当然。
HTML:
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:
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
}
});
Example here: http://jsfiddle.net/pyG2v/
这里的例子：http: //jsfiddle.net/pyG2v/
回答by Rocket Hazmat
$('#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
}
});
回答by RegarBoy
When you click on option you get the Id name of option group.
当您单击选项时，您将获得选项组的 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>