javascript - 修改代码以检查选择框中的重复条目

Question

我有以下内容，它动态地将新值选项添加到选择框中。我遇到的问题是它在将新选项添加​​到选择框中之前不检查重复条目。有没有办法我可以更改我的代码，以便它会提醒用户发现重复条目​​并停止添加相同的选项值？

function refadd() {

var val = document.getElementById('docsref').value

    if (val != "") {

        var select = document.getElementById('docsref_list');

        var option = document.createElement('option');

        option.text = value

        select.add(option,select.option)

        select.selectedIndex = select.options.length - 1;
    }

}

Answer 1

最好是遍历所有现有选项并检查您是否有匹配项。
将添加循环，使其出现在您的 IF 条件之前。
如果找到匹配项，您可以通知用户（例如 alert ），然后执行“ return ”语句。

如下所示：

function refadd() 
{
    var value = document.getElementById('docsref').value
    if (value != "") 
    {
        var select = document.getElementById('docsref_list');
        var option = document.createElement('option');
        var flag = 0;
        for(var i = 0; i < select.length; i++)
        {
        if(select[i].value == value)
        {   
            flag = 1;
        }
        }
        if(flag == 1)
        {
        alert('Value is duplicate.');
        }
        else
        {
        option.text = value;
        select.add(option,select.option);
        select.selectedIndex = select.options.length - 1;
        }

    }
}

如果你的 HTML 是这样的：

<div>
    <input type = "text" name = "docsref" id = "docsref" style = "width:100px;"/>
    <input type = "button" name = "addValues" id = "addValues" value = "AddValues" onClick = "refadd();"/>
    </br>
    <select id = "docsref_list">
    <option value = "1">1</option>
    <option value = "2">2</option>
    </select>
</div>

希望有帮助

Answer 2

using jQuery...

    function refadd() {    
    var val = $("#docsref").val();
        if (val != "") {
    for(var i = 0; i < select.length; i++)
        {
        if(select[i].value == value)
        {   
            alert("can't add.");
            return false;
        }
        }
        var ob = new Option("option text", "value");
        $(ob).html("option text");
        $("#selectList").append(ob);
        }
    }