Compruebe si el valor está en la lista de selección con JQuery

Respuestas:

180

Usar el selector de atributo es igual a

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

Si el valor de la opción se estableció a través de Javascript, eso no funcionará. En este caso podemos hacer lo siguiente:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});
Lachlan Roche
fuente
8
El segundo enfoque explícito también es más seguro ya que permite valores de opción que contengan cualquier carácter, incluidos ]y `\`. Evite crear cadenas de selección a partir de texto sin formato sin realizar un escape CSS adecuado.
Bobince
8
¿Por qué el return false?
Grant Birchmeier
14
Devolver falso se usa para romper / finalizar .cada ciclo.
Ángel
Si crea nuevas opciones mediante JavaScript usando esta lógica: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</option>')) ; (o por supuesto en un estilo más hablador), el primer ejemplo funcionará (no es necesario que repita).
Lukas Jelinek
1
Parece que no puedo encontrar un caso en el que el primer fragmento de código no funcione. Intenté agregar una nueva opción y configurar el valor de una opción existente con la función val () de jQuery. En ambos casos, el primer fragmento de código aún funcionó. ¿En qué caso fallaría?
dallin
17

En caso de que usted (o alguien más) pueda estar interesado en hacerlo sin 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
fuente
¿Por qué no solo i ++?
csr-nontol
1
++ i prefijo es siempre más rápido que postfix @ csr-nontol
Alok hace
11

Aquí hay otra opción similar. En mi caso, estoy verificando valores en otro cuadro mientras construyo una lista de selección. Seguí encontrando valores indefinidos cuando comparaba, así que configuré mi cheque de esta manera:

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

No tengo idea de si este enfoque es más caro.

cam_pdx
fuente
8

¿Por qué no utilizar un filtro?

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

Las comparaciones sueltas funcionan porque existe> 0 es verdadero, existe == 0 es falso, por lo que puede usar

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

O combinarlo:

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

O donde cada menú desplegable de selección tiene la clase de cajas de selección, esto le dará un objeto jquery de las selecciones que contienen el valor:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();
keV
fuente
Esta es en mi humilde opinión la forma más intuitiva.
Simon
4 

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

Elaine
fuente
En su solución, no es theValuesino el option_numbermenú desplegable. Tu solución está mal.
Arsman Ahmad
1

Sé que esta es una pregunta antigua, ya que esta funciona mejor.

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 puede ver en este ejemplo, estoy buscando por nombre de lista desplegable de datos de etiquetas únicas y el valor de la opción seleccionada. Por supuesto, no los necesita para que funcionen, pero los incluí para que otros pudieran ver que puede buscar valores múltiples, etc.

PhanFree
fuente