【问题标题】：Plain JavaScript delete item from drop down select纯 JavaScript 从下拉选择中删除项目
【发布时间】：2016-07-14 01:02:55
【问题描述】：

我得到了以下两个dropdown 列表，我想删除在任一列表中选择的选项。因此，如果选择了选项 1，它将不会出现在列表 2 中。

<select class='form-dropdown' name='first' id='first'>
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

<select class='form-dropdown' name='second' id='second'>
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

这在普通的旧 JavaScript 中怎么可能实现？

编辑：

通过在 window.onload() 中加载 EventListener 解决了错误 Uncaught TypeError: Cannot read property 'addEventListener' of null，见下文

window.onload = function () {
    document.getElementById("first").addEventListener("change", function() {
        show_all("second");
        document.querySelector("#second option[value='"+this.value+"']").style.display="none";
    });


    document.getElementById("second").addEventListener("change", function() {
        show_all("first");
        document.querySelector("#first option[value='"+this.value+"']").style.display="none";
    });

};

function show_all(select_name){
    var second_options = document.querySelectorAll("#"+select_name+" option");

    for(var i=0;i<second_options.length;i++){
        second_options[i].style.display="block";
    }
}

【问题讨论】：

每次更改第一个值时，用第一个值填充第二个下拉列表会不会更好？
jsfiddle.net/xh3qb8r6
我的问题是，我的表单（其中包含三个列表）不适用于 Zer00ne 提供的代码，所以我认为这是因为 JQuery 的东西。这也是我想要一个纯 JavaScript 解决方案的原因。

标签： javascript dropdown

【解决方案1】：

更新

我意识到仅仅使用索引是行不通的，因为#second 的长度会减少，而且它的索引也会改变。所以我添加了一个for 循环来遍历#second，并且在#first 和#second 选项之间的值匹配时，索引用于定位匹配选项，然后将其删除。

关于change 事件...
获取选中的#first <option> 的索引。
在 var 中存储索引，然后...
使用.remove(index)定位#second

var first = document.getElementById('first');


first.addEventListener('change', function(e) {
  var second = document.getElementById('second');
  var selected = this.options[this.selectedIndex].value;
   for (var i=0; i<second.length; i++){
     if (second.options[i].value == selected )
     second.remove(i);
  }
}, false);

<select class='form-dropdown' name='first' id='first'>
  <option value='none' selected>No Choice</option>
  <option value='Workshop 1'>Workshop 1</option>
  <option value='Workshop 2'>Workshop 2</option>
  <option value='Workshop 3'>Workshop 3</option>
  <option value='Workshop 4'>Workshop 4</option>
  <option value='Workshop 5'>Workshop 5</option>
</select>

<select class='form-dropdown' name='second' id='second'>
  <option value='none' selected>No Choice</option>
  <option value='Workshop 1'>Workshop 1</option>
  <option value='Workshop 2'>Workshop 2</option>
  <option value='Workshop 3'>Workshop 3</option>
  <option value='Workshop 4'>Workshop 4</option>
  <option value='Workshop 5'>Workshop 5</option>
</select>

【讨论】：

【解决方案2】：

您可以将更改事件添加到第一个 select，然后在第二个列表中隐藏与当前选择的值相同的选项，您可以添加另一个名为 show_all() 的函数以在隐藏选择之前显示所有选项一：

function show_all(){
  var second_options = document.querySelectorAll("#second option");
  for(var i=0;i<second_options.length;i++){
    second_options[i].style.display="block";
  }  
  document.getElementById("second").value='none';
}

document.getElementById("first").addEventListener("change", function() {
  show_all();

  document.querySelector("#second option[value='"+this.value+"']").style.display="none";
});

<select class='form-dropdown' name='first' id='first'>
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

<select class='form-dropdown' name='second' id='second'>
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

如果您想避免两个列表中的重复选择，您可以使用：

function show_all(select_name){
  var second_options = document.querySelectorAll("#"+select_name+" option");
  
  for(var i=0;i<second_options.length;i++){
    second_options[i].style.display="block";
  }  
}

document.getElementById("first").addEventListener("change", function() {
  show_all("second");
  document.querySelector("#second option[value='"+this.value+"']").style.display="none";
})

document.getElementById("second").addEventListener("change", function() {
  show_all("first");
  document.querySelector("#first option[value='"+this.value+"']").style.display="none";
})

<select class='form-dropdown' name='first' id='first'>
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

<select class='form-dropdown' name='second' id='second'>
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

【讨论】：

假设这不仅仅是对一个高代表用户回答一个应该关闭的问题的反应，因为它缺乏任何努力......我建议这可能是因为你可以达到无效状态在这种情况下：如果用户在选择第一组之前从第二组中进行选择，则可以选择两次相同的值（因为隐藏选项不会取消选择它们）。
@ZakariaAcharki 如果我尝试第二个代码，我会得到 Uncaught TypeError: Cannot set property 'onchange' of null
这意味着它无法通过 id first 或 second 找到选择之一，只需确保您拥有这些 id。
@ZakariaAcharki 我确定我的 html 代码中有这些 id。有没有可能，这只适用于 jquery？
不，答案中没有 jquery 代码，尝试使用 .addEventListener() 检查我的更新。

【解决方案3】：

HTML 代码：-

<select class='form-dropdown' name='first' id='first'>
<option value='none' selected>No Choice</option>
<option value='Workshop 1'> Workshop 1 </option>
<option value='Workshop 2'> Workshop 2 </option>
<option value='Workshop 3'> Workshop 3 </option>
<option value='Workshop 4'> Workshop 4 </option>
<option value='Workshop 5'> Workshop 5 </option>
</select>

<select class='form-dropdown' name='second' id='second'>
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

Javascript 代码：-

var first  = document.getElementById('first');
var second = document.getElementById('second');
var optionOld = document.createElement("option");

first.addEventListener('change', function() {
     var option = second.querySelector('option[value="' + this.value + '"]');
     if(optionOld.text != '')
     {
       second.add(optionOld);
       }
            optionOld = option;
            second.removeChild(option);
});

我在 adeneo JSfiddler 中更改了一些代码。

请检查它是否适用于我的环境。

也找提琴手https://jsfiddle.net/xh3qb8r6/1/

谢谢。

【讨论】：

【解决方案4】：

看看这段代码，对我来说很好用

<html>
<select class='form-dropdown' name='first' id='first' onchange="fun1(this.value)">
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select>

<select class='form-dropdown' name='second' id='second' onchange="fun2(this.value)">
    <option value='none' selected>No Choice</option>
    <option value='Workshop 1'> Workshop 1 </option>
    <option value='Workshop 2'> Workshop 2 </option>
    <option value='Workshop 3'> Workshop 3 </option>
    <option value='Workshop 4'> Workshop 4 </option>
    <option value='Workshop 5'> Workshop 5 </option>
</select></html>

<script>

function fun1(val){
    updateFun2(val)
}

function fun2(val){
    updateFun1(val)
}

function updateFun2(val){
    selectobject=document.getElementById('second');
     for (var i=0; i<selectobject.length; i++){
      if (selectobject.options[i].value == val )
         selectobject.remove(i);
      }
}

function updateFun1(val){
    selectobject=document.getElementById('first');
     for (var i=0; i<selectobject.length; i++){
      if (selectobject.options[i].value == val )
         selectobject.remove(i);
      }
}

</script>

【讨论】：

@ZakariaAcharki 这也是我所经历的，所以我删除了支票。首先我认为这会起作用。

【解决方案5】：

您应该在第一个下拉列表中使用change 事件监听器，检查它的值，然后从第二个下拉列表中删除具有相同值的元素：

document.getElementById("first").addEventListener("change", event=> {
  if (event.target.value === "none") return

  document.querySelector(`#second [value="${event.target.value}"]`).remove()
})

在JS Bin 上查看演示。

【讨论】：