Sprawdź, czy wartość znajduje się na liście wyboru za pomocą JQuery

112

Jak mogę, używając JQuery, sprawdzić, czy wartość należy do listy rozwijanej, czy nie?

drop-down-menu jquery-selectors user271507
źródło

Odpowiedzi:

180

Użyj selektora Atrybut równa się

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

Jeśli wartość opcji została ustawiona za pomocą JavaScript, to nie zadziała. W takim przypadku możemy wykonać następujące czynności:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});
Lachlan Roche
źródło
8
Jawne drugie podejście jest również bezpieczniejsze, ponieważ zezwala na wartości opcji zawierające dowolny znak, w tym ]i `\ '. Unikaj budowania ciągów selektorów z surowego tekstu bez wykonywania odpowiednich znaków ucieczki CSS.
bobince
8
Dlaczego return false?
Grant Birchmeier
14
Zwrot false służy do przerywania / kończenia pętli .each.
Anioł
Jeśli utworzysz nowe opcje w JavaScript, używając tej logiki: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</option>')) ; (lub oczywiście w bardziej rozmownym stylu), pierwszy przykład zadziała (nie musisz iterować).
Lukas Jelinek
1
Nie mogę znaleźć przypadku, w którym pierwszy fragment kodu nie działa. Próbowałem zarówno dołączyć nową opcję, jak i ustawić wartość istniejącej opcji za pomocą funkcji val () jQuery. W obu przypadkach pierwszy fragment kodu nadal działał. W jakim przypadku by się to nie udało?
dallin
17

Na wypadek gdybyś (lub ktoś inny) był zainteresowany zrobieniem tego bez jQuery:

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
źródło
Dlaczego nie po prostu i ++?
csr-nontol
1
++ Prefiks i jest zawsze szybszy niż postfix @ csr-nontol
Alok
11

Oto kolejna podobna opcja. W moim przypadku sprawdzam wartości w innym polu podczas tworzenia listy wyboru. Ciągle napotykałem niezdefiniowane wartości, gdy porównywałem, więc ustawiłem swój test w ten sposób:

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

Nie mam pojęcia, czy takie podejście jest droższe.

cam_pdx
źródło
8

Dlaczego nie użyć filtra?

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

Luźne porównania działają, ponieważ istnieje> 0 jest prawdą, istnieje == 0 jest fałszem, więc możesz po prostu użyć

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

Lub połącz to:

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

Lub jeśli każde menu wybierz zawiera klasę select-boxes, to da ci obiekt jquery z zaznaczeniami, które zawierają wartość:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();
keV
źródło
To jest najbardziej intuicyjny sposób.
Simon
4 

if(!$('#select-box').find("option:contains('" + thevalue  + "')").length){
//do stuff
}
Rozwiń fragment

elaine
źródło
W Twoim rozwiązaniu to nie jest theValuetylko option_numberlista rozwijana. Twoje rozwiązanie jest złe.
Arsman Ahmad
1

Wiem, że to stare pytanie, ale to działa lepiej.

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);
}

Jak widać w tym przykładzie, szukam według unikatowych nazw tagów rozwijanych z danymi i wartości wybranej opcji. Oczywiście nie potrzebujesz ich, aby działały, ale dołączyłem je, aby inni mogli zobaczyć, że możesz wyszukiwać wiele wartości itp.

PhanFree
źródło