Проверьте, находится ли значение в списке выбора с помощью JQuery

112

Как я могу с помощью JQuery проверить, принадлежит ли значение раскрывающемуся списку или нет?

drop-down-menu jquery-selectors user271507
источник

Ответы:

180

Используйте переключатель "Атрибут равно"

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

Если значение параметра было установлено через Javascript, это не сработает. В этом случае мы можем сделать следующее:

var exists = false;
$('#select-box option').each(function(){
    if (this.value == 'bar') {
        exists = true;
        return false;
    }
});
Лахлан Рош
источник
8
Явный второй подход также более безопасен, поскольку он позволяет значениям параметров, содержащим любой символ, включая ]и `\`. Избегайте создания строк селектора из необработанного текста без надлежащего экранирования CSS.
bob с
8
Почему return false?
Грант Бирчмайер
14
Return false используется для прерывания / завершения каждого цикла.
Ангел
Если вы создаете новые параметры с помощью JavaScript, используя эту логику: $ ('# select-box'). Append ($ ('<option value = "' + value + '">' + text + '</option>')) ; (или, конечно, в более разговорчивом стиле), первый пример подойдет (повторять не нужно).
Лукас Елинек
1
Кажется, я не могу найти случай, когда первый фрагмент кода не работает. Я пробовал как добавить новую опцию, так и установить значение существующей опции с помощью функции jQuery val (). В обоих случаях первый фрагмент кода все еще работал. В каком случае он потерпит неудачу?
dallin
17

На всякий случай вам (или кому-то еще) может быть интересно сделать это без 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;
   }
Марко Демайо
источник
Почему не просто i ++?
csr-nontol
1
Префикс ++ i всегда быстрее, чем постфикс @ csr-nontol
Алок,
11

Вот еще один аналогичный вариант. В моем случае я проверяю значения в другом поле, когда создаю список выбора. Я продолжал сталкиваться с неопределенными значениями, когда сравнивал, поэтому я установил свой чек следующим образом:

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

Понятия не имею, дороже ли этот подход.

cam_pdx
источник
8

Почему бы не использовать фильтр?

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

Слабые сравнения работают, потому что существует> 0 истинно, существует == 0 ложно, поэтому вы можете просто использовать

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

Или совместите это:

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

Или, если каждое раскрывающееся меню выбора имеет класс select-box, это даст вам объект jquery для выбора (ов), который содержит значение:

var matched = $('.select-boxes option').filter(function(){ return $(this).val() == thevalue; }).parent();
кэВ
источник
Это, имхо, самый интуитивно понятный способ.
Simon
4 

if(!$('#select-box').find("option:contains('" + thevalue  + "')").length){
//do stuff
}
Развернуть фрагмент

Элейн
источник
В вашем решении это не так, theValueа option_numberв раскрывающемся списке. Ваше решение неверное.
Арсман Ахмад
1

Я знаю, что это старый вопрос, потому что этот работает лучше.

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

Как вы можете видеть в этом примере, я ищу по уникальному имени тега в раскрывающемся списке данных и значению выбранной опции. Конечно, они вам не нужны для работы, но я добавил их, чтобы другие могли видеть, что вы можете искать по нескольким значениям и т. Д.

PhanFree
источник