我有一個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