J'ai un select avec 2 optgroups. Est-il possible d'appeler une fonction uniquement si une option du premier groupe d'opt est sélectionnée et d'appeler une autre fonction si une option du deuxième groupe d'opt est sélectionnée?Jquery - Sélectionnez optgroup dans select
7
A
Répondre
26
Bien sûr.
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
}
});
Exemple ici: http://jsfiddle.net/pyG2v/
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
Lorsque vous cliquez sur l'option que vous obtenez le nom identifiant du groupe d'options.
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>
Questions connexes
- 1. Le clic sélectionnez le optgroup dans jQuery
- 2. Filtre jQuery sur optgroup
- 3. Créer html select avec optgroup de json
- 4. Conversion HTML select/optgroup en Flex
- 5. <optgroup> dans Opera utilisant jQuery
- 6. Stockage des valeurs de optgroup jQuery Mobile dans SQLite
- 7. Optgroup dans .NET Listbox
- 8. comment faire optgroup dans asp.mvc?
- 9. jQuery Sélection de pays/état avec OptGroup
- 10. JQuery optgroup trier en ordre alphabétique
- 11. Jquery, si optgroup ne contient pas
- 12. Bug dans select/optgroup utilisant des accélérateurs de clavier dans webkit?
- 13. jQuery sélectionnez une option spécifique dans <select> tag
- 14. Comment indenter plusieurs niveaux de select optgroup avec CSS?
- 15. Jquery remplir optgroup pour la deuxième boîte de sélection dynamique
- 16. optgroup non visible?
- 17. sélectionnez dans select erreur montrant - manquant parenthèse
- 18. Conversion Oracle SQL Select dans PosgreSQL sélectionnez
- 19. Sélectionnez Lignes Comme colonne dans SELECT
- 20. mysql select au sein sélectionnez
- 21. Vérifiez si optgroup par id/label existe dans jquery?
- 22. <optgroup> Ne fonctionne pas dans jQuery Dropdown
- 23. jQuery Autocomplete: Event-select
- 24. jquery select supprimer undefined?
- 25. Sélectionnez dans jQuery
- 26. selectbox avec optgroup avec knockoutJS
- 27. Plugins Jquery Multi Select box
- 28. jquery deux select connecte
- 29. Sencha Touch - Comment implémenter optgroup
- 30. Catch étiquette optgroup sous forme
incroyable. Le code a l'air si clair et si facile, mais j'ai eu tellement de mal à le faire. Merci! – user495915
+1 pour être plus rapide que moi. –