Vérifiez si la valeur est dans la liste de sélection avec JQuery

112

Comment puis-je, en utilisant JQuery, vérifier si une valeur appartient à la liste déroulante ou non?

drop-down-menu jquery-selectors user271507
la source

Réponses:

180

Utilisez le sélecteur d'attribut égal

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

Si la valeur de l'option a été définie via Javascript, cela ne fonctionnera pas. Dans ce cas, nous pouvons faire ce qui suit:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});
Lachlan Roche
la source
8
La seconde approche explicite est également plus sûre car elle autorise les valeurs d'option contenant n'importe quel caractère, y compris ]et `\`. Évitez de créer des chaînes de sélection à partir de texte brut sans effectuer un échappement CSS approprié.
bobince
8
Pourquoi le return false?
Grant Birchmeier
14
Return false est utilisé pour interrompre / terminer la boucle .each.
Angel
Si vous créez de nouvelles options par JavaScript en utilisant cette logique: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</option>')) ; (ou bien sûr dans un style plus bavard), le premier exemple fonctionnera (vous n'avez pas besoin d'itérer).
Lukas Jelinek
1
Je n'arrive pas à trouver un cas où le premier extrait de code ne fonctionne pas. J'ai essayé à la fois d'ajouter une nouvelle option et de définir la valeur d'une option existante avec la fonction val () de jQuery. Dans les deux cas, le premier extrait de code fonctionnait toujours. Dans quel cas cela échouerait-il?
dallin
17

Juste au cas où vous (ou quelqu'un d'autre) pourriez être intéressé à le faire sans 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
la source
Pourquoi pas simplement i ++?
csr-nontol le
1
++ le préfixe i est toujours plus rapide que postfix @ csr-nontol
Alok
11

Voici une autre option similaire. Dans mon cas, je vérifie les valeurs dans une autre case lorsque je crée une liste de sélection. Je n'arrêtais pas de rencontrer des valeurs indéfinies lorsque je comparais, alors j'ai défini ma vérification de cette façon:

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

Je ne sais pas si cette approche est plus chère.

cam_pdx
la source
8

Pourquoi ne pas utiliser un filtre?

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

Les comparaisons lâches fonctionnent car existe> 0 est vrai, existe == 0 est faux, vous pouvez donc simplement utiliser

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

Ou combinez-le:

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

Ou lorsque chaque liste déroulante de sélection a la classe de boîtes de sélection, cela vous donnera un objet jquery du ou des select (s) qui contiennent la valeur:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();
keV
la source
C'est à mon avis la manière la plus intuitive.
Simon le
4 

if(!$('#select-box').find("option:contains('" + thevalue  + "')").length){
//do stuff
}
Développer l'extrait

Elaine
la source
Dans votre solution, ce n'est theValueque la option_numberliste déroulante d'entrée. Votre solution est fausse.
Arsman Ahmad
1

Je sais que c'est une sorte de vieille question par celle-ci fonctionne mieux.

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

Comme vous pouvez le voir dans cet exemple, je recherche par nom de liste déroulante de données de balises uniques et la valeur de l'option sélectionnée. Bien sûr, vous n'en avez pas besoin pour que cela fonctionne, mais je les ai inclus afin que les autres puissent voir que vous pouvez rechercher plusieurs valeurs, etc.

PhanFree
la source