如何使用 jquery 唯一地添加选项以进行选择

Posted 2023-02-22

【中文标题】如何使用 jquery 唯一地添加选项以进行选择

【英文标题】：how can i uniquely add options to select using jquery

【发布时间】：2012-06-03 14:43:10

【问题描述】：

我在<select> 中有很多独特的选项。只有当它是唯一的并且不存在于现有选项中时，我才需要添加一个新选项。

如何使用 jquery 查找给定的option 是否已存在于给定的select 中？

例如：

<select id="combobox">
    <option value="">Select one...</option>
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Pears">Pears</option>
</select>

新的有效选项：梨 新的无效选项：Apple

【问题讨论】：

我的问题的扩展：是否有一个实用程序可以为我提供这两组的交集？ （我知道我可以轻松编写它，但如果某些东西已经存在，我宁愿重用它）。例如给定选项和新选项。我想将这两者的交集添加到 givenOptions。

Watch my updated answer 到您的不区分大小写的请求。

“两个选项的交集”是什么意思？

@DavidThomas 现有选项（在本例中为 givenOptions：Apple、Banana、Pears）。 newOptions 就像一个数组（我通过 ajax 调用得到它，例如 [apple, plums]）。我想得到givenOptions 和newOptions 的交集以在这两个集合中找到独特的元素并将它们添加到givenOptions。

【参考方案1】：

if (!$("#combobox option[value='Apple']").length)
    // Add it

使其可重复使用可以：

if (!$("#combobox option[value='" + value + "']").length)
    // Add it

Live DEMO

不区分大小写：

var isExist = !$('#combobox option').filter(function() 
    return $(this).attr('value').toLowerCase() === value.toLowerCase();
).length;​

完整代码：（演示）

$('#txt').change(function() 
    var value = this.value;

    var isExist = !!$('#combobox option').filter(function() 
        return $(this).attr('value').toLowerCase() === value.toLowerCase();
    ).length;

    if (!isExist) 
        console.log(this.value + ' is a new value!');
        $('<option>').val(this.value).text(this.value).appendTo($('#combobox'));
    
);​

Live DEMO

【讨论】：

如何使这个不区分大小写？

太棒了！你能解释一下 jquery 中的!! 运算符是什么吗？这部分我看不懂：!!$('#combobox option').filter(...

感谢格多伦！那很有帮助。您是否知道一个实用程序可以为我提供这两个 options 的交集？ （我知道我可以轻松编写它，但如果某些东西已经存在，我宁愿重用它）。例如当前选项集中的 givenOptions 和 newOptions 作为 json 数组接收。我想将这两者的交集添加到 givenOptions。我的相关问题：***.com/questions/10796413/…

@brainydexter。没有内置的方法。你需要自己写。没那么难，接近 3-5 行代码。

【参考方案2】：

我假设您想通过 value 而不是文本内容进行搜索。在您的示例中，它们始终相同，但可能并不总是...

var toAdd = 'Apricot',
    combobox = $('#combobox');

if (!combobox.find('option[value="' + toAdd + '"]').length) 
    combobox.append('<option value="' + toAdd + '">' + toAdd + '</option>');

【参考方案3】：

假设newOption 变量中存在新的选项文本：

$('button').click(
    function() 
        var newOption = $('#newOptionInput').val(),
            opts = [];
        $('#combobox option').each(
            function() 
                opts.push($(this).text());
            );

        if ($.inArray(newOption, opts) == -1) 
            $('<option />')
                .val(newOption)
                .text(newOption)
                .appendTo('#combobox');
        
    );​

JS Fiddle demo.

编辑更正了上面的代码（我忘记了$.inArray()在找不到值时返回-1，而不是false），并使用更合适的选择器。

参考资料：

appendTo()。 each(). $.inArray()/jQuery.inArray()。 push()。 text()。 val().

【讨论】：

这不会在给定页面上的所有“选项”中搜索吗？

【参考方案4】：

if ($('#combobox').find('option[value="Pear"]').length) 
  // there's pear
 else 
  // nope, no pear