Scorrere le opzioni <select>


202

Ho un <select>elemento in HTML. Questo elemento rappresenta un elenco a discesa. Sto cercando di capire come scorrere le opzioni <select>nell'elemento tramite JQuery.

Come posso usare JQuery per visualizzare il valore e il testo di ciascuna opzione in un <select>elemento? Voglio solo mostrarli in una alert()scatola.

Risposte:


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

2
È strano, dovrebbe funzionare, ma per qualche motivo non è adatto a me ... :(
SublymeRick,

14
Dovrebbe essere $ (this) .val () invece di this.value come diceva IT ppl.
Thihara,

Solo la risposta dell'IT ppl ha funzionato per me (e non era solo il "questo")
user984003,

1
Dovrebbe essere $ (questo) .val () e $ (questo) .text () per ottenere rispettivamente valore e testo
Amit Bhagat,

5
@AmitKB - È meglio utilizzare il metodo DOM nativo per estrarre testo e valori. 1) È più breve 2) evita di costruire due nuovi oggetti jQuery.
karim79,

79

Questo ha funzionato per me

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

5
Se lo memorizzassi $(this)in una variabile sarebbe più efficiente, ovverovar $this = $(this); $this.text(); $this.val();...etc.
Liam

25

può anche utilizzare ciascuno parametrizzato con indice e l'elemento.

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

// funzionerà anche questo

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

17

E il modo necessario, non jquery, per i follower, dal momento che Google sembra inviare tutti qui:

  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
  }

4

Puoi provare anche in questo modo.

Il tuo HTMLcodice

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

Il tuo JQuerycodice

$("#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);
  }

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

1

Se non vuoi Jquery (e puoi usare ES6)

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

Le risposte solo al codice sono scoraggiate. Si prega di aggiungere alcune spiegazioni su come questo risolve il problema o su come differisce dalle risposte esistenti. Dalla recensione
Nick

1

Un'altra variazione sulle risposte già proposte senza jQuery.

Object.values(document.getElementById('mySelect').options).forEach(option => alert(option))
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.