普通 JavaScript 从下拉列表中删除项目 select

Question

我得到了以下两个 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 中怎么可能？

编辑：

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

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

Answer 1

您可以将更改事件添加到第一个 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>

Answer 2

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

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

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

请参阅 JS Bin 上的演示。

Answer 3

看看这段代码，对我来说工作正常

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

Answer 4

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 中的一些代码。

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

同时查找fiddler https://jsfiddle.net/xh3qb8r6/1/

谢谢。

Answer 5

更新

我意识到仅使用索引是行不通的，因为 #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>

普通 JavaScript 从下拉列表中删除项目 select

Plain JavaScript delete item from drop down select

javascript

dropdown

更新