Verifique se o valor está na lista de seleção com JQuery

112

Como posso, usando JQuery, verificar se um valor pertence à lista suspensa ou não?

drop-down-menu jquery-selectors user271507
fonte

Respostas:

180

Use o Seletor de Igualdade de Atributo

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

Se o valor da opção foi definido via Javascript, isso não funcionará. Nesse caso, podemos fazer o seguinte:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});
Lachlan Roche
fonte
8
A segunda abordagem explícita também é mais segura, pois permite valores de opção contendo qualquer caractere, incluindo ]e `\`. Evite construir sequências de seletores a partir de texto bruto sem fazer o escape CSS adequado.
bobince
8
Por que return false?
Grant Birchmeier
14
Return false é usado para interromper / encerrar .cada loop.
Angel
Se você criar novas opções por JavaScript usando esta lógica: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</option>')) ; (ou, claro, em um estilo mais falador), o primeiro exemplo funcionará (você não precisa iterar).
Lukas Jelinek
1
Não consigo encontrar um caso em que o primeiro trecho de código não funcione. Tentei anexar uma nova opção e definir o valor de uma opção existente com a função val () do jQuery. Em ambos os casos, o primeiro fragmento de código ainda funcionou. Em que caso isso falharia?
dallin
17

Apenas no caso de você (ou outra pessoa) estar interessado em fazer isso sem 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
fonte
Por que não apenas i ++?
csr-nontol
1
++ i prefixo é sempre mais rápido que postfix @ csr-nontol
Alok
11

Aqui está outra opção semelhante. No meu caso, estou verificando os valores em outra caixa enquanto construo uma lista de seleção. Continuei encontrando valores indefinidos quando comparava, então configurei minha verificação desta forma:

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

Não tenho ideia se essa abordagem é mais cara.

cam_pdx
fonte
8

Por que não usar um filtro?

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

As comparações vagas funcionam porque existe> 0 é verdadeiro, existe == 0 é falso, então você pode apenas usar

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

Ou combine-o:

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

Ou onde cada menu suspenso de seleção tem a classe de caixas de seleção, isso lhe dará um objeto jquery da (s) seleção (ões) que contém o valor:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();
keV
fonte
Essa é, na verdade, a maneira mais intuitiva.
Simon
4 

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

Elaine
fonte
Em sua solução, não é theValuesenão a option_numberlista suspensa. Sua solução está errada.
Arsman Ahmad
1

Eu sei que esta é uma pergunta meio antiga, mas esta funciona melhor.

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

Como você pode ver neste exemplo, estou pesquisando pelo nome da lista suspensa de dados de tags exclusivas e o valor da opção selecionada. Claro que você não precisa deles para que funcionem, mas eu os incluí para que outros pudessem ver que você pode pesquisar valores múltiplos, etc.

PhanFree
fonte