使用JQuery检查值是否在选择列表中

112

我如何使用JQuery检查值是否属于下拉列表？

drop-down-menu jquery-selectors

— 用户271507
source

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

— 拉克兰·罗奇（Lachlan Roche）
source

8

显式第二种方法也更安全，因为它允许包含任何字符（包括]和）的选项值。避免在不进行正确的CSS转义的情况下从原始文本构建选择器字符串。

— bobince'2

8

为什么return false呢？

— Grant Birchmeier 2013年

14

Return false用于中断/ each循环。

— 天使

如果使用以下逻辑通过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;
   }

— 马可·德马约
source

为什么不只是我++？

— csr-nontol

++ i前缀总是比后缀@ csr-nontol快得多

— Alok

11

这是另一个类似的选项。就我而言，我在构建选择列表时正在检查另一个框中的值。当我进行比较时，我一直遇到未定义的值，因此我将检查设置为：

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

我不知道这种方法是否更昂贵。

— cam_pdx
source

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-boxes类的地方，这将为您提供包含值的select的jquery对象：

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

— keV
source

这是恕我直言的最直观的方式。

— 西蒙

4

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

展开摘要

— 埃莱恩
source

在您的解决方案，它不是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
source