Iterasi melalui opsi <select>

202

Saya memiliki <select>elemen dalam HTML. Elemen ini mewakili daftar drop-down. Saya mencoba memahami cara mengulang melalui opsi dalam <select>elemen melalui JQuery.

Bagaimana cara menggunakan JQuery untuk menampilkan nilai dan teks dari setiap opsi dalam suatu <select>elemen? Saya hanya ingin menampilkannya dalam sebuah alert()kotak.

pengguna208662
sumber

Jawaban:

346
$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});
karim79
sumber
2
Aneh, ini seharusnya bekerja tetapi untuk beberapa alasan tidak cocok untuk saya ... :(
SublymeRick
14
Seharusnya $ (this) .val () bukan this.value seperti kata ppl IT.
Thihara
Hanya jawaban ppl IT yang bekerja untuk saya (dan bukan hanya "ini")
user984003
1
Seharusnya $ (this) .val () dan $ (this) .text () untuk mendapatkan nilai dan teks secara
berurutan
5
@AmitKB - Lebih baik menggunakan metode DOM asli untuk mengekstrak teks dan nilai-nilai. 1) Ini lebih pendek 2) menghindari membangun dua objek jQuery baru.
karim79
79

Ini berhasil untuk saya

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});
Ppl
sumber
5
Jika Anda disimpan $(this)dalam variabel itu akan lebih efisien, yaituvar $this = $(this); $this.text(); $this.val();...etc.
Liam
25

juga dapat Menggunakan parameter masing-masing dengan indeks dan elemen.

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

// ini juga akan berhasil

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

Dan cara yang diperlukan, non-jquery, untuk pengikut, karena google tampaknya mengirim semua orang ke sini:

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

Anda dapat mencoba seperti ini juga.

HTMLKode Anda

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

JQueryKode Anda

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

ATAU

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

Jika Anda tidak ingin Jquery (dan dapat menggunakan ES6)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}
Jeyko Caicedo
sumber
Kode hanya jawaban yang tidak disarankan. Harap tambahkan beberapa penjelasan tentang bagaimana ini menyelesaikan masalah, atau bagaimana ini berbeda dari jawaban yang ada. Dari Ulasan
Nick
1

Variasi lain pada jawaban yang sudah diajukan tanpa jQuery.

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