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

112

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

drop-down-menu jquery-selectors

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
источник