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

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

• http://api.jquery.com/each/
• http://jsfiddle.net/Rx3AP/

Answer 2

Cela a fonctionné pour moi

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});

Answer 3

Peuvent également être paramétrés chacun avec l'index et l'élément.

$('#selectIntegrationConf').find('option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

// ceci fonctionnera également

$('#selectIntegrationConf option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

Answer 4

Et la manière requise, non jquery, pour les followers, puisque google semble envoyer tout le monde ici :

  var select = document.getElementById("select_id");
  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    // now have option.text, option.value
  }

Answer 5

Si vous ne voulez pas de Jquery (et pouvez utiliser ES6)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}