Itération dans les options de <sélection>.

Question

J'ai un <select> en HTML. Cet élément représente une liste déroulante. J'essaie de comprendre comment itérer parmi les options de l'élément <select> via JQuery.

Comment puis-je utiliser JQuery pour afficher la valeur et le texte de chaque option dans une <select> élément ? Je veux juste les afficher dans un alert() boîte.

Answer 1

Vous pouvez aussi essayer comme ça.

Votre HTML Code

<select id="mySelectionBox">
    <option value="hello">Foo</option>
    <option value="hello1">Foo1</option>
    <option value="hello2">Foo2</option>
    <option value="hello3">Foo3</option>
</select>

Vous JQuery Code

$("#mySelectionBox option").each(function() {
    alert(this.text + ' ' + this.value);
});

O

var select =  $('#mySelectionBox')[0];

  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    alert (option.text + ' ' + option.value);
  }

Answer 2

$.each($("#MySelect option"), function(){
                    alert($(this).text() + " - " + $(this).val());                    
                });

Answer 3

Une autre variation sur les réponses déjà proposées sans jQuery.

Object.values(document.getElementById('mySelect').options).forEach(option => alert(option))

Answer 4

Après avoir essayé plusieurs codes, et toujours pas de travail, je suis allé à la documentation officielle de select2.js. Voici le lien : https://select2.org/programmatic-control/add-select-clear-items

à partir de là, la façon d'effacer la sélection select2 js est :

$('#mySelect2').val(null).trigger('change');