<select> seçenekleriyle yineleme


205

<select>HTML'de bir öğem var . Bu öğe bir açılır listeyi temsil eder. <select>JQuery aracılığıyla öğedeki seçenekleri aracılığıyla yineleme nasıl anlamaya çalışıyorum .

Bir öğedeki her seçeneğin değerini ve metnini görüntülemek için JQuery'i nasıl kullanabilirim <select>? Sadece bir alert()kutuda göstermek istiyorum .

Yanıtlar:


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

2
Tuhaf, bu işe
yaramalı

14
Bunun yerine $ (this) .val () olmalı. IT ppl'nin dediği gibi değer.
2012'de Thihara

Sadece IT
ppl'in

1
Değer ve metin almak için sırasıyla $ (this) .val () ve $ (this) .text () olmalıdır
Amit Bhagat

5
@AmitKB - Metin ve değerleri ayıklamak için yerel DOM yöntemini kullanmak daha iyidir. 1) Daha kısa 2) iki yeni jQuery nesnesi oluşturmaktan kaçınır.
karim79

80

Bu benim için çalıştı

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

5
Eğer kayıtlı ise $(this)bir değişkene o yani daha verimli olacaktırvar $this = $(this); $this.text(); $this.val();...etc.
Liam

25

Ayrıca her biri dizin ve eleman ile parametreli kullanın.

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

// bu da işe yarayacak

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

17

Ve google herkesi buraya gönderiyor gibi göründüğünden, takipçiler için gerekli, jquery olmayan yol:

  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

Bunu da deneyebilirsiniz.

Kişisel HTMLKod

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

Sen JQueryKodu

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

VEYA

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

Jquery istemiyorsanız (ve ES6'yı kullanabilirsiniz)

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

Yalnızca kod yanıtları önerilmez. Lütfen bunun sorunu nasıl çözdüğüne veya mevcut cevaplardan nasıl farklı olduğuna dair biraz açıklama ekleyin. Şu kaynaktan
Nick

1

JQuery olmadan önceden önerilen cevaplar üzerinde başka bir varyasyon.

Object.values(document.getElementById('mySelect').options).forEach(option => alert(option))
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.