Plain JavaScript delete item from drop down select

2019-09-01 04:52发布

站内问答 / JavaScript
1885 5 5

I got the two following dropdown lists and I want to remove the option chosen in either one. So if option 1 is chosen, it will not be there in list 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>

How is this possible in plain old JavaScript?

EDIT:

The Error Uncaught TypeError: Cannot read property 'addEventListener' of null was solved by loading the EventListener in window.onload(), see below

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

5条回答
forever°为你锁心
2楼-- · 2019-09-01 05:04

You should use change event listener on the first dropdown, check the value of it, and remove the element from the second dropdown which has the same value:

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

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

See demo on JS Bin.

查看更多
0人赞 添加讨论(0) 举报
走好不送
3楼-- · 2019-09-01 05:12

Update

I realized that just using the index wasn't working right since #second would diminish in length and it's index would change as well. So I added a for loop to iterate through #second and upon a match of values between #first and #second options, the index is used to target the matching option and then it's removed.

  • on the change event...
  • Get the index of the #first <option> selected.
  • Store index in var, and...
  • Use .remove(index) targeting #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>

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
4楼-- · 2019-09-01 05:16

Just have a look at this code , working fine for me

<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>
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
5楼-- · 2019-09-01 05:18

HTML CODE :-

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

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

I have changed some code in adeneo JSfiddler.

Please check it working on my environment.

Also Find fiddler https://jsfiddle.net/xh3qb8r6/1/

Thanks.

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
6楼-- · 2019-09-01 05:21

You could add change event to the first select then hide the option in second list that have the same value of the current selected, and you could add another function called show_all() to show all the options before hidding the selected one :

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>

If you want to avoid the duplicate selection in the both lists you could use :

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)