javascript - 从许多选择标签中选择一次删除选项

Question

我有一些选定的输入，具有相同的选项。

同一个类，每次选择不同的id。

每个选择都有一个函数“onChange”事件，它会给我选择的选项。

我怎样才能从所有其他选择中删除这个值，而不在选择的地方删除它，以及如果“取消选择”如何恢复它。

非常感谢

代码:-如果选择了选项二，我想将其从所有选择中删除，但不是选择的地方-

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

Answer 1

您必须获取所有选定的值并将其存储在数组中。然后你可以使用 filter 使用 includes

隐藏数组中的那些

我使用了 jQuery $("select").change(.. 因为它更容易。:)

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