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

最好通过所有现有选项循环，并检查您是否匹配将添加循环，使其显示 BEFORE 您的IF条件。
如果找到匹配项，您可以通知用户（例如提醒），然后执行“返回”语句。

如下所示：

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

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

2 个答案: