使用JQuery，如何检查下拉菜单是否包含某个值？

Question

如何使用JQuery检查下拉菜单中是否包含某个值？这里的值不是指作为菜单项显示的文本，而是指该项的ID（val）。我已经有了一个下拉菜单中的项目列表，并想添加更多。在此之前，我希望确保不会重复任何键值对。

- Mark13426

---

您所说的“ID”，是指数值吗？还是实际上指html中的“id”属性？ - James Montagne

你尝试过 if($('option[value="value_id_here"]').length){ //exists } 吗？ - Shef

页面加载时还是点击某个东西时执行这个操作？ - j08691

@j08691 当某个东西被点击时 - Mark13426

@Mark13426 你可以轻松地将其限制为特定的选择器。 - Shef

Answer 1

下面这段代码可以实现你想要的功能。（JSFiddle）

HTML

<select id="sel">
    <option value="foo">foo</option>
</select>
<button data-add="foo">add foo</button>
<button data-add="bar">add bar</button>

js

$('button').on('click', function() {
    var new_val = $(this).data('add');

    if ($('option[value='+new_val+']', '#sel').length) {
        alert('nope, exists!')
    } else {
        $('<option value="'+ new_val +'">'+new_val+'</option>').appendTo( $('#sel') );
    }
});

如果您使用的是 jQuery 1.7 以前的版本，请使用 .bind 替代 .on。

- Marc Diethelm

Answer 2

这是Marc Diethelms解决方案的简化版本，无需使用数据属性：jsfiddle

$('button').bind('click', function() {
    var new_val = $(this).html().split(' ').splice(1).join(' '),
        $sel = '#sel';
    $('option[value='+new_val+']', $sel).length > 0 ?
        alert('nope, exists!') :
        $('<option value="'+ new_val +'">'+new_val+'</option>').appendTo($sel);
});

- Simon

---

西蒙，你的技巧很好，但数据属性只是为了在没有实际数据源的情况下使示例工作。一旦你需要实现多种语言，你的示例就会出问题。通常不应该依赖输入的表示值作为逻辑值。而且，在任何情况下，你可以非常确定页面上不会有任何按钮在任何真实场景中添加新的选项元素。我只是为了提供一个例子而把它们放在那里。 - Marc Diethelm

Answer 3

你可以尝试这个

  $(document).ready(function () {

  if ($("#drpentry").find("option[value='Dog']:contains('Ds')").length > 0) {

             alert('exist entry');
       }
       else {

           alert('not exist');
       }

   });

请在此查看：http://jsfiddle.net/Eemqh/1/

- Jignesh Rajput