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

180

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