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

Posted 2023-02-16

【中文标题】使用 JQuery 检查值是不是在选择列表中

【英文标题】：Check if value is in select list with JQuery使用 JQuery 检查值是否在选择列表中

【发布时间】：2011-01-15 23:29:45

【问题描述】：

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

【参考方案1】：

使用Attribute Equals Selector

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

【讨论】：

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

返回 false 用于中断/结束 .each 循环。

如果你通过 JavaScript 使用这个逻辑创建新选项： $('#select-box').append($('' + text + '')); （或者当然是更健谈的风格），第一个例子会起作用（你不需要迭代）。

我似乎找不到第一个代码 sn-p 不起作用的情况。我已经尝试过使用 jQuery 的 val() 函数附加一个新选项和设置一个现有选项的值。在这两种情况下，第一个代码 sn-p 仍然有效。什么情况下会失败？

只是想在第一个示例中指出您缺少值的引号。 option[value"'+thevalue+'"]'

【参考方案2】：

以防万一您（或其他人）可能有兴趣在不使用 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++？

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

【参考方案3】：

这是另一个类似的选项。就我而言，我在构建选择列表时正在检查另一个框中的值。当我比较时，我总是遇到未定义的值，所以我这样设置我的检查：

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

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

【参考方案4】：

为什么不使用过滤器？

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

【讨论】：

这是最直观的方式。

【参考方案5】：

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

【讨论】：

在您的解决方案中，它不是theValue，而是下拉列表中的option_number。你的解决方案是错误的。

【参考方案6】：

我知道这是一个老问题，这个问题更好。

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

正如您在此示例中所见，我正在按唯一标签数据下拉名称和所选选项的值进行搜索。当然你不需要这些来工作，但我将它们包括在内以便其他人可以看到你可以搜索多个值等。

【参考方案7】：

if ($select.find('option[value=' + val + ']').length) ...

【讨论】：

欢迎您。您的答案可以改进：通过添加代码描述。告诉我们它是如何工作的以及它是如何解决问题的。

【参考方案8】：

拥有选择的 html 集合，您可以检查每个选择是否具有具有特定值的选项并过滤那些不匹配条件的选项：

//get select collection:
let selects = $('select')
//reduce if select hasn't at least one option with value 1
.filter(function ()  return [...this.children].some(el => el.value == 1) );