简单的JavaScript从下拉选择中删除项目

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()的函数来显示所有选项在隐藏选定的一个之前：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

<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 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中更改了一些代码。

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

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

感谢。

Answer 4

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

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

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

请参阅JS Bin上的演示。

Answer 5

更新

我意识到仅使用索引并不正常，因为#second的长度会减少，而且它的索引也会改变。所以我添加了一个for循环来迭代#second，并且在#first和#second选项之间的值匹配时，索引用于定位匹配选项然后它＆ ＃39;已删除。

{li> on change event ...
• 获取所选#first <option>的索引。
• 将索引存储在var中，然后......
• 使用 .remove(index) 定位#second

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;