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


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

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

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.


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

C'est à mon avis la manière la plus intuitive.
Simon le

4

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


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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.