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
source

180

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
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
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
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
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
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
source