根據輸入值在下拉菜單中添加和刪除選項

Question

如果我在輸入框中輸入一個值，然后單擊按鈕。 我想檢查下拉列表中的輸入值（如果下拉列表中存在值）我想刪除該選項，否則我想在選項中添加輸入值。

HTML：

<input type="text" id="inputValue" />
<button id="myBtn" onclick="validate()">Click</button>
<select id="mySelect">
   <option>Apple</option>
   <option>Orange</option>
   <option>Mango</option>
   <option>Lemon</option>
</select>

JS：

function validate() {
   var ipValue = document.getElementById('inputValue').value;
   var select = document.getElementById('mySelect');
   for(i=0;i<select.length;i++) {
      if(select[i] == ipValue) {
         ipValue.removeChild(select[i]);
      }
      else {
         var option = document.createElement('option');
         select.appendChild(option);
         option.innerHTML = ipValue;
      }
   }
}

Answer 1

function validate() {
        var ipValue = document.getElementById('inputValue').value;
        var select = document.getElementById("mySelect");
        var selectOption = select.children;

        for (i = 0; i < select.length; i++) {
            if (selectOption[i].text == ipValue) {
                select.removeChild(selectOption[i]);
                return;
            } 
        }
        var option = document.createElement('option');
        select.appendChild(option);
        option.text = ipValue;

    }

Answer 2

這應該為您做到這一點。

除其他外，要刪除選項值，請使用select.options.remove(index)並添加select.add(option)

 function validate() { var ipValue = document.getElementById('inputValue').value; var select = document.getElementById('mySelect'); for(i=0;i<select.options.length;i++) { if(select.options[i].text == ipValue) { select.options.remove(i); return; } } if(ipValue.trim().length > 0) { var option = document.createElement('option'); option.text = ipValue; select.add(option) } } 

 <input type="text" id="inputValue" /> <button id="myBtn" onclick="validate()">Click</button> <select id="mySelect"> <option>Apple</option> <option>Orange</option> <option>Mango</option> <option>Lemon</option> </select>