Kiểm tra xem giá trị có trong danh sách được chọn hay không với JQuery

Làm cách nào để tôi sử dụng JQuery, kiểm tra xem một giá trị có thuộc danh sách thả xuống hay không?

Sử dụng Bộ chọn các dấu bằng thuộc tính

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

Nếu giá trị của tùy chọn được đặt qua Javascript, điều đó sẽ không hoạt động. Trong trường hợp này, chúng ta có thể làm như sau:

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

Chỉ trong trường hợp bạn (hoặc ai đó) có thể muốn làm điều đó mà không có 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;
   }

Đây là một tùy chọn tương tự khác. Trong trường hợp của tôi, tôi đang kiểm tra các giá trị trong một hộp khác khi tạo danh sách được chọn. Tôi tiếp tục chạy vào các giá trị không xác định khi tôi sẽ so sánh, vì vậy tôi đặt kiểm tra của mình theo cách này:

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

Tôi không biết liệu phương pháp này có đắt hơn không.

Tại sao không sử dụng một bộ lọc?

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

So sánh lỏng lẻo hoạt động bởi vì tồn tại> 0 là đúng, tồn tại == 0 là sai, vì vậy bạn chỉ có thể sử dụng

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

Hoặc kết hợp nó:

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

Hoặc nơi mỗi menu thả xuống chọn có lớp hộp chọn, điều này sẽ cung cấp cho bạn một đối tượng jquery của (các) lựa chọn chứa giá trị:

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

Tôi biết đây là một loại câu hỏi cũ bởi câu hỏi này hoạt động tốt hơn.

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

Như bạn có thể thấy trong ví dụ này, tôi đang tìm kiếm theo tên thả xuống dữ liệu thẻ duy nhất và giá trị của tùy chọn đã chọn. Tất nhiên bạn không cần những thứ này để những thứ này hoạt động nhưng tôi đã bao gồm chúng để người khác có thể thấy bạn có thể tìm kiếm nhiều giá trị, v.v.