Перевірте, чи є значення у списку вибору за допомогою 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-ухилень.

— bobince

8

Чому return false?

— Грант Бірхмайер

14

Повернення false використовується для переривання / закінчення циклу .each.

— Ангел

Якщо ви створюєте нові параметри за допомогою JavaScript за допомогою цієї логіки: $ ('# select-box'). Append ($ ('<value value = "' + value + '">' + text + '</option>')) ; (або, звичайно, у більш балакучому стилі), перший приклад спрацює (не потрібно повторювати).

— Лукаш Єлінек

1

Я не можу знайти випадок, коли перший фрагмент коду не працює. Я спробував як додати новий параметр, так і встановити значення існуючої опції за допомогою функції val () jQuery. В обох випадках перший фрагмент коду все ще працював. У якому випадку це не вдасться?

— Даллін

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

— Марко Демайо
джерело

Чому б не просто я ++?

— csr-nontol

1

Префікс ++ я завжди швидший, ніж постфікс @ csr-nontol

— Alok

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
}

Або там, де в кожному спадному меню вибору є клас вибірок, це дасть вам об'єкт jquery із вибраних елементів, які містять значення:

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

— кЕВ
джерело

Це найінтуїтивніший спосіб.

— Саймон

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
джерело