Iterar a través de <select> opciones

Question

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

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

Answer 1

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

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

Answer 2

Esto funcionó para mí

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

Answer 3

También puede usar con parámetros 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 trabajará

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

Answer 4

Y el requisito, de manera 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 
    } 

Answer 5

también no jQuery

[...select].forEach(el => { 
    // code 
});