javascript - 检查用户使用 JavaScript 添加的选项

Question

我有一个下拉菜单，其中有预填充的值和一个输入字段，供用户向下拉菜单添加更多值，添加部分工作正常但有一个重复条目检查，如果我输入循环中嵌套的 else 会永远存在，如果我将它移出，它会绕过对重复条目的检查。有关如何解决此问题的任何建议？

<select id="myDrop">
    <option value="Select" disabled selected>Select</option>
    <option value="Games">Games</option>
    <option value="Movies">Movies</option>
</select>
<input type="text" id="userEntry">

<button onclick="addEntry()">Add Entry</button>
<button onclick="myBtn()">Submit</button>

<script>
    function addEntry() {
    
        var dropDown = document.getElementById('myDrop');
        var uEntry = document.getElementById('userEntry');
    
        if (uEntry.value === "") {
            alert("Please enter your option value");
        } else {

            for (var i = 0; i < dropDown.length; i++) {
                if (dropDown[i] === uEntry.value) {
                    alert("Record Exists");
                } else {
                    var uOption = document.createElement('option');
                    uOption.text = uEntry.value;
                    dropDown.add(uOption);
                    alert('Option added');
                }
            }
        }
    }
 </script>

Answer 1

您需要检查该值是否已存在于下拉列表中，如果找到则返回。你现在所做的方式，因为你每次都不断添加 for else 条件，你正在进入一个无限循环。 您还需要比较 dropdown[i].value 与 uEntry.value 而不是节点 dropdown[i]。

<select id="myDrop">
    <option value="Select" disabled selected>Select</option>
    <option value="Games">Games</option>
    <option value="Movies">Movies</option>
</select>
<input type="text" id="userEntry">

<button onclick="addEntry()">Add Entry</button>
<button onclick="myBtn()">Submit</button>

<script>
    function addEntry(){

        var dropDown = document.getElementById('myDrop').children;
        var uEntry = document.getElementById('userEntry');

        if(uEntry.value === ""){
            alert("Please enter your option value");
        }
        else{

        for(var i = 0 ; i< dropDown.length;i++){
            if(dropDown[i].value === uEntry.value){
                alert("Record Exists");
                return;
            }
        }
               var uOption =  document.createElement('option');
                uOption.text = uEntry.value;
                dropDown.add(uOption);
                alert('Option added');
           
        }
    }
 </script>