问题

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

回答1:

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>

回答2:

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>

回答3:

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.

回答4:

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.

回答5:

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>

来源：https://stackoverflow.com/questions/36234072/plain-javascript-delete-item-from-drop-down-select

标签

javascript

dropdown

Plain JavaScript delete item from drop down select