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

您应循环所有选项，然后决定是否添加新选项

<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{

          var doAdd = true;
          for(var i = 0 ; i< dropDown.children.length;i++){
            if(dropDown.children[i].value === uEntry.value){
                alert("Record Exists");
                doAdd = false;
            }
          }

          if (doAdd){
                var uOption = document.createElement('option');
                uOption.text = uEntry.value;
                dropDown.add(uOption);
                alert('Option added');
          }

        }
    }
 </script>

Answer 2

您需要检查下拉列表中是否已存在该值以及是否返回。你现在正在做的事情，因为你每次都在不断添加其他条件，你正在进入一个无限循环。您还需要将dropdown[i].value与uEntry.value进行比较，而不是节点下拉列表[i]。

＆＃13;

<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>

＆＃13;

Answer 3

如果直接从下拉列表中检查，它将进入无限循环，因此首先获取一个数组中的下拉值，并检查文本框值是否退出，如果不退出并在下拉列表中添加所有值，也检查案件，

例如：下拉有'游戏'，用户输入'游戏'这是退出的价值。

请尝试这个。

 <script>
 function addEntry(){

        var dropDown = document.getElementById('myDrop');
        var uEntry = document.getElementById('userEntry');
		var dropDownArray= new Array();
		
		for (i = 0; i < dropDown.options.length; i++) {
		   dropDownArray[i] = (dropDown .options[i].value).toLowerCase();
		}
		
        if(uEntry.value === ""){
            alert("Please enter your option value");
        }
       else{

       
            if(dropDownArray.indexOf((uEntry.value).toLowerCase()) != -1){
                alert("Record Exists");
            }
            else{
                var uOption = document.createElement('option');
                uOption.text = uEntry.value;
                dropDown.add(uOption);
                alert('Option added');
            }
      

        }
    }
    </script>

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

3 个答案: