Repita as opções <select>

202

Eu tenho um <select>elemento em HTML. Este elemento representa uma lista suspensa. Estou tentando entender como iterar pelas opções no <select>elemento via JQuery.

Como uso o JQuery para exibir o valor e o texto de cada opção em um <select>elemento? Eu só quero exibi-los em uma alert()caixa.

user208662
fonte

Respostas:

346
$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});
karim79
fonte
2
Seu estranho, isso deve funcionar, mas por algum motivo isso não acontecer para mim ... :(
SublymeRick
14
Deve ser $ (this) .val () em vez de this.value, como disse o ppl de TI.
Thihara
A única resposta de ppl ele trabalhou para mim (e não era apenas o "isto")
user984003
1
Deve ser $ (this) .val () e $ (this) .text () para obter valor e texto respectivamente
Amit Bhagat
5
@AmitKB - É melhor usar o método DOM nativo para extrair o texto e os valores. 1) É mais curto 2) evita a construção de dois novos objetos jQuery.
karim79
79

Isso funcionou para mim

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});
Pessoas p
fonte
5
Se você armazenados $(this)em uma variável que seria mais eficiente, ou seja,var $this = $(this); $this.text(); $this.val();...etc.
Liam
25

Também pode usar parametrizado cada um com o índice e o elemento

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

// isso também funcionará

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

E a maneira requisitada e não-jquery para os seguidores, pois o Google parece enviar todos aqui:

  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
fonte
4

Você pode tentar assim também.

Seu 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>

Você JQuerycodifica

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

OU

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

Se você não deseja o Jquery (e pode usar o ES6)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}
Jeyko Caicedo
fonte
As respostas apenas de código são desencorajadas. Por favor, adicione algumas explicações sobre como isso resolve o problema ou como isso difere das respostas existentes. Da avaliação
Nick
1

Outra variação nas respostas já propostas sem o jQuery.

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