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

Question

我有一堆独特的选项<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

Answer 1

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

使其可重用可以是：

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

现场演示

不区分大小写：

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

现场演示

Answer 2

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

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

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

Answer 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 小提琴演示。

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

参考：

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

Answer 4

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