Controlla se il valore è nell'elenco di selezione con JQuery

112

Come posso, utilizzando JQuery, verificare se un valore appartiene o meno all'elenco a discesa?

drop-down-menu jquery-selectors

— user271507
fonte

180

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

Se il valore dell'opzione è stato impostato tramite Javascript, non funzionerà. In questo caso possiamo fare quanto segue:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});

— Lachlan Roche
fonte

8

Il secondo approccio esplicito è anche più sicuro in quanto consente valori di opzione contenenti qualsiasi carattere, inclusi ]e "\". Evita di creare stringhe di selezione dal testo grezzo senza eseguire correttamente l'escape CSS.

— bobince

8

Perché il return false?

— Grant Birchmeier

14

Return false viene utilizzato per interrompere / terminare il ciclo .each.

— Angel

Se crei nuove opzioni tramite JavaScript utilizzando questa logica: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</option>')) ; (o ovviamente in uno stile più loquace), il primo esempio funzionerà (non è necessario iterare).

— Lukas Jelinek

1

Non riesco a trovare un caso in cui il primo frammento di codice non funzioni. Ho provato sia ad aggiungere una nuova opzione che a impostare il valore di un'opzione esistente con la funzione val () di jQuery. In entrambi i casi, il primo snippet di codice funzionava ancora. In che caso fallirebbe?

— dallin

17

Nel caso in cui tu (o qualcun altro) potessi essere interessato a farlo senza 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

Perché non solo i ++?

— csr-nontol

1

++ i prefisso è sempre più veloce di postfix @ csr-nontol

— Alok

11

Ecco un'altra opzione simile. Nel mio caso, sto controllando i valori in un'altra casella mentre creo un elenco di selezione. Continuavo a imbattermi in valori indefiniti durante il confronto, quindi ho impostato il controllo in questo modo:

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

Non ho idea se questo approccio sia più costoso.

— cam_pdx
fonte

8

Perché non utilizzare un filtro?

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

I confronti sciolti funzionano perché esiste> 0 è vero, esiste == 0 è falso, quindi puoi semplicemente usare

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

Oppure combinalo:

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

O dove ogni menu a discesa di selezione ha la classe delle caselle di selezione, questo ti darà un oggetto jquery delle selezioni che contengono il valore:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();

— keV
fonte

Questo è imho il modo più intuitivo.

— Simon

4

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

Espandi lo snippet

— Elaine
fonte

Nella tua soluzione, non è theValueche il option_numbermenu a discesa in. La tua soluzione è sbagliata.

— Arsman Ahmad

1

So che questa è una specie di vecchia domanda, questa funziona meglio.

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

Come puoi vedere in questo esempio, sto cercando in base al nome del menu a discesa dei dati dei tag univoci e al valore dell'opzione selezionata. Ovviamente non hai bisogno di questi per farli funzionare, ma li ho inclusi in modo che gli altri possano vedere che puoi cercare più valori, ecc.

— PhanFree
fonte