Durchlaufen Sie die <select> -Optionen

202

Ich habe ein <select>Element in HTML. Dieses Element repräsentiert eine Dropdown-Liste. Ich versuche zu verstehen, wie die Optionen im <select>Element über JQuery durchlaufen werden .

Wie verwende ich JQuery, um den Wert und den Text jeder Option in einem <select>Element anzuzeigen ? Ich möchte sie nur in einer alert()Box anzeigen .

user208662
quelle

Antworten:

346
$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});
karim79
quelle
2
Es ist komisch, das sollte funktionieren, aber aus irgendeinem Grund funktioniert es nicht für mich ... :(
SublymeRick
14
Es sollte $ (this) .val () anstelle von this.value sein, wie IT ppl sagte.
Thihara
Nur die Antwort von IT ppl funktionierte für mich (und es war nicht nur das "dies")
user984003
1
Es sollte $ (this) .val () und $ (this) .text () sein, um Wert bzw. Text zu erhalten
Amit Bhagat
5
@AmitKB - Es ist besser, die native DOM-Methode zu verwenden, um den Text und die Werte zu extrahieren. 1) Es ist kürzer 2) Vermeidet das Erstellen von zwei neuen jQuery-Objekten.
Karim79
79

Das hat bei mir funktioniert

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});
IT ppl
quelle
5
Wenn Sie $(this)in einer Variablen speichern, wäre es effizienter, dhvar $this = $(this); $this.text(); $this.val();...etc.
Liam
25

kann auch parametrisiert jeweils mit index und dem element verwenden.

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

// das wird auch funktionieren

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

Und der erforderliche, nicht jquery Weg für Follower, da Google jeden hierher zu schicken scheint:

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

Sie können es auch so versuchen.

Ihr HTMLCode

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

Sie JQueryCode

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

ODER

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

Wenn Sie Jquery nicht möchten (und ES6 verwenden können)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}
Jeyko Caicedo
quelle
Nur-Code-Antworten werden nicht empfohlen. Bitte fügen Sie eine Erklärung hinzu, wie dies das Problem löst oder wie sich dies von den vorhandenen Antworten unterscheidet. Aus dem Rückblick
Nick
1

Eine weitere Variation der bereits vorgeschlagenen Antworten ohne jQuery.

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