Iterar a través de las opciones <select>

202

Tengo un <select>elemento en HTML. Este elemento representa una lista desplegable. Estoy tratando de entender cómo iterar a través de las opciones en el <select>elemento a través de JQuery.

¿Cómo uso JQuery para mostrar el valor y el texto de cada opción en un <select>elemento? Solo quiero mostrarlos en una alert()caja.

usuario208662
fuente

Respuestas:

346
$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});
karim79
fuente
2
Es extraño, esto debería funcionar, pero por alguna razón no lo hace para mí ... :(
SublymeRick
14
Debería ser $ (this) .val () en lugar de this.value como IT ppl dijo.
Thihara
Solo la respuesta de IT ppl funcionó para mí (y no fue solo el "esto")
user984003
1
Debería ser $ (this) .val () y $ (this) .text () para obtener valor y texto respectivamente
Amit Bhagat
55
@AmitKB: es mejor usar el método DOM nativo para extraer el texto y los valores. 1) Es más corto 2) evita construir dos nuevos objetos jQuery.
karim79
79

Esto funciono para mi

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});
IT ppl
fuente
55
Si almacenó $(this)en una variable, sería más eficiente, es decirvar $this = $(this); $this.text(); $this.val();...etc.
Liam
25

También se puede usar parametrizado cada uno con índice y el elemento.

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

// esto también funcionará

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

Y la forma requerida, no jquery, para los seguidores, ya que Google parece enviar a todos aquí:

  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
  }
rogerdpack
fuente
4

Puedes probar así también.

Su HTMLcódigo

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

Tu JQuerycódigo

$("#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);
  }
Dulith De Costa
fuente
1
$.each($("#MySelect option"), function(){
                    alert($(this).text() + " - " + $(this).val());                    
                });
Yojana Ambavkar
fuente
1

Si no quieres Jquery (y puedes usar ES6)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}
Jeyko Caicedo
fuente
Se desaconsejan las respuestas de solo código. Agregue alguna explicación sobre cómo esto resuelve el problema o cómo difiere de las respuestas existentes. De la opinión
Nick
1

Otra variación de las respuestas ya propuestas sin jQuery.

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