Überprüfen Sie mit JQuery, ob der Wert in der Auswahlliste enthalten ist

112

Wie kann ich mit JQuery überprüfen, ob ein Wert zur Dropdown-Liste gehört oder nicht?

drop-down-menu jquery-selectors user271507
quelle

Antworten:

180

Verwenden Sie den Attribut-Gleichheits-Selektor

var thevalue = 'foo';
var exists = 0 != $('#select-box option[value='+thevalue+']').length;

Wenn der Wert der Option über Javascript festgelegt wurde, funktioniert dies nicht. In diesem Fall können wir Folgendes tun:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});
Lachlan Roche
quelle
8
Der explizite zweite Ansatz ist auch sicherer, da er Optionswerte zulässt, die ein beliebiges Zeichen enthalten, einschließlich ]und `\`. Vermeiden Sie es, Auswahlzeichenfolgen aus Rohtext zu erstellen, ohne eine ordnungsgemäße CSS-Escape-Funktion auszuführen.
Bobince
8
Warum das return false?
Grant Birchmeier
14
Return false wird verwendet, um jede Schleife zu unterbrechen / zu beenden.
Engel
Wenn Sie mit dieser Logik neue Optionen mit JavaScript erstellen: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</ option>')) ;; (oder natürlich in einem gesprächigeren Stil), das erste Beispiel wird funktionieren (Sie müssen nicht iterieren).
Lukas Jelinek
1
Ich kann anscheinend keinen Fall finden, in dem das erste Code-Snippet nicht funktioniert. Ich habe versucht, sowohl eine neue Option anzuhängen als auch den Wert einer vorhandenen Option mit der val () -Funktion von jQuery festzulegen. In beiden Fällen funktionierte das erste Code-Snippet noch. In welchem ​​Fall würde es scheitern?
Dallas
17

Nur für den Fall, dass Sie (oder jemand anderes) daran interessiert sein könnten, dies ohne jQuery zu tun:

var exists = false;
for(var i = 0, opts = document.getElementById('select-box').options; i < opts.length; ++i)
   if( opts[i].value === 'bar' )
   {
      exists = true; 
      break;
   }
Marco Demaio
quelle
Warum nicht einfach i ++?
csr-nontol
11

Hier ist eine andere ähnliche Option. In meinem Fall überprüfe ich die Werte in einem anderen Feld, während ich eine Auswahlliste erstelle. Beim Vergleichen sind mir immer wieder undefinierte Werte begegnet, daher habe ich meine Prüfung folgendermaßen eingestellt:

if ( $("#select-box option[value='" + thevalue + "']").val() === undefined) { //do stuff }

Ich habe keine Ahnung, ob dieser Ansatz teurer ist.

cam_pdx
quelle
8

Warum nicht einen Filter verwenden?

var thevalue = 'foo';    
var exists = $('#select-box option').filter(function(){ return $(this).val() == thevalue; }).length;

Lose Vergleiche funktionieren, weil existiert> 0 ist wahr, existiert == 0 ist falsch, also können Sie einfach verwenden

if(exists){
    // it is in the dropdown
}

Oder kombinieren Sie es:

if($('#select-box option').filter(function(){ return $(this).val() == thevalue; }).length){
    // found
}

Oder wenn jede Auswahl-Dropdown-Liste die Auswahlfeld-Klasse hat, erhalten Sie ein Abfrageobjekt der Auswahl (en), die den Wert enthalten:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();
keV
quelle
Dies ist imho der intuitivste Weg.
Simon
4 

if(!$('#select-box').find("option:contains('" + thevalue  + "')").length){
//do stuff
}
Erweitern Sie das Snippet

elaine
quelle
In Ihrer Lösung ist es nicht theValuenur das option_numberIn-Dropdown. Ihre Lösung ist falsch.
Arsman Ahmad
1

Ich weiß, dass dies eine alte Frage ist, die besser funktioniert.

if(!$('.dropdownName[data-dropdown="' + data["item"][i]["name"] + '"] option[value="'+data['item'][i]['id']+'"]')[0]){
  //Doesn't exist, so it isn't a repeat value being added. Go ahead and append.
  $('.dropdownName[data-dropdown="' + data["item"][i]["name"] + '"]').append(option);
}

Wie Sie in diesem Beispiel sehen können, suche ich nach eindeutigen Tags, dem Dropdown-Namen für Daten und dem Wert der ausgewählten Option. Natürlich brauchen Sie diese nicht, damit diese funktionieren, aber ich habe sie eingefügt, damit andere sehen können, dass Sie nach mehreren Werten usw. suchen können.

PhanFree
quelle