根據輸入值添加和刪除下拉列表中的選項

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

這應該爲你做的。

的措施包括刪除您使用select.options.remove(index)選項值，並添加

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>

Answer 2

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; 

    }