javascript - 根据输入值添加和删除下拉列表中的选项

标签 javascript html

如果我在输入框中输入一个值并单击按钮。我想检查下拉列表中的输入值(如果下拉列表中存在这些值)我想删除该选项,否则我想在选项中添加输入值。

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

最佳答案

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;

    }

关于javascript - 根据输入值添加和删除下拉列表中的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35802838/

相关文章:

javascript - 返回 3 个离用户位置最近的位置(地理位置)并为他们列出这些位置

javascript - 如何在Sequelize中按多对多关系排序?

html - 如何使用 htaccess 将 website.com/和 website.com/index.php 重定向到另一个页面

html - 你能让 css opacity 堆叠(尤其是在 IE 中)吗?

html - 带有背景的 CSS 旋转文本显示了一些背景问题

php - 如何确保AJAX被JavaScript调用?

javascript - 在create-react-app中使用react-map-gl时出错

javascript - HTML5中输入文件的onchange事件后执行脚本

javascript - 为什么创建laravel元素时默认没有创建css和assets目录?

html - 为什么这些文本阴影效果不起作用?