remove option once is selected from many select tag

Question

I've some selected input, that have the same options.

same class, different id for each select.

I've a function "onChange" event of each select, that give me the option selected.

How can I remove then this value from all the others select, without removing it where is selected, and how to revert it if is "de-selected".

many thanks

the code: -if option two is selected, id like to remove it from all select but not where is selected-

[..........on same div....]

<select onchange="getval(this);" class="optionRisp form-control" id="select_1_1" style="">
   <option value="">choose one node or leaf</option>
   <option value="2">2</option>
</select>
<select onchange="getval(this);" class="optionRisp form-control" id="select_2_1" style="">
   <option value="">choose one node or leaf</option>
   <option value="2">2</option>
</select>
[..........on others div....]

<select onchange="getval(this);" class="optionRisp form-control" id="select_1_2" style="">
   <option value="">choose one node or leaf</option>
   <option value="2">2</option>
</select>

<scirp>
 function getval(sel)
        {
            //remove option from list due selection
          //sel is the element just selected!
        }

</scirp>

You can make use of javasciprt $this and use that to change all others except the one that has just been clicked. Would need to see code to tell you how to implement though. — cullimorer

Eddie Eddie · Accepted Answer · 2018-02-16T13:07:15

You have to get all the selected values and store it on an array. Then you can use filter to hide those in array using includes

And i used jQuery $("select").change(.. coz it easier. :)

$(document).ready(function() {
  $("body").on('change', '.optionRisp', function() {
    var val = [];

    //Get all selected
    $('.optionRisp option:selected').each(function() {
      if ($(this).val() != "") val.push($(this).val());
    });

    //Hide Selected
    if ( $(this).val() != "" ) {
      $(".optionRisp").not(this).find("option").show().filter(function() {
         return $(this).val() != "" && val.includes($(this).val()) ? true : false;
      }).hide();
    } else {
      $(".optionRisp").find("option").show().filter(function() {
         return $(this).val() != "" && val.includes($(this).val()) ? true : false;
      }).hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="optionRisp form-control">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select class="optionRisp form-control">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select class="optionRisp form-control">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

remove option once is selected from many select tag

1 Answers