我有一個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. 從JQUERY選項中選擇元素OptGroup
- 2. Jquery引導多選擇optgroup選擇
- 3. 有沒有辦法在select標籤中選擇optgroup的標籤?
- 4. jQuery的選擇2顯示OPTGROUP標籤
- 5. jQuery Chaining使用OptGroup選擇國家/州
- 6. jQuery的OPTGROUP和選擇價值
- 7. jquery get select()選擇
- 8. 選擇optgroup中的所有選項
- 9. 在vue 1.x中選擇`optgroup`
- 10. ZF在選擇中禁用optgroup標籤
- 11. 使用Selenium在optgroup上選擇選項
- 12. optgroup選擇組的標題
- 13. optgroup上的jQuery篩選器
- 14. jquery .select在選擇菜單中選擇功能?
- 15. JQuery沒有選擇SELECT
- 16. jQuery select src選擇圖片
- 17. jQuery:在<select>元素中找到<optgroup>的選定值
- 18. Symfony2中形成與選擇不OPTGROUP
- 19. Select2默認從optgroup中選擇
- 20. 在特定OPTGROUP選擇一個值
- 21. jQuery隱藏/在主選擇器上顯示optgroup base
- 22. 的jQuery選擇特定OPTGROUP並刪除選項
- 23. 獲取選擇選項的指數OPTGROUP
- 24. JQuery選擇:點擊一個OPTGROUP必須選擇它裏面的所有選項
- 25. 使用json的optgroup創建html選擇
- 26. Ruby從選擇列表中選擇隨機元素與optgroup
- 27. 在oracle中多選擇SELECT
- 28. SQL - 在SELECT中選擇
- 29. 在PostgreSQL Table Select中選擇
- 30. Linq在select中選擇
驚人。代碼看起來非常清晰和容易,但我在這方面掙扎如此之多。謝謝! – user495915 2011-03-29 15:50:19
+1因爲比我快。 – 2011-03-29 15:51:31