从另一个选择框中隐藏选定的选项

Question

编辑，是的，我知道this 的问题，但这个答案并不完全适合我的情况

我正在为这个案例寻找解决方案

当用户从一个选择框中选择一个选项时，该选项对于其他选择框应该隐藏。
When a selected option changes or is removed (select a blank option) the previously selected option should become available again to the other select boxes.

我当前代码的问题：

When an option changes, the previous option is not "released" to the other select boxes so they can not use it again until the page reloads.
基本上，之前选择的选项的结果会从其他选择框中消失。

我附上了一个小提琴，所以你可以自己看看。

$(document).ready(function() {

  // this "initializes the boxes"
  $('.update-select').each(function(box) {

    var value = $('.update-select')[box].value;

    if (value) {

      $('.update-select').not(this).find('option[value="' + value + '"]').hide();
    }
  });

  // this is called every time a select box changes
  $('.update-select').on('change', function(event) {

    var prevValue = $(this).data('previous');
    $('.update-select').not(this).find('option[value="' + prevValue + '"]').show();
    var value = $(this).val();

    if (value) {

      $(this).data('previous', value);
      console.log($(this).data('previous', value));
      $('.update-select').not(this).find('option[value="' + value + '"]').hide();
    }

  });
});

* {
  box-sizing: border-box;
  font-size: 1em;
  font-family: sans-serif;
}

body {
  display: flex;
  float: right;
}

body div {
  margin: 20px;
}

select {
  border: 2px solid #78909c;
  padding: 10px;
  border-radius: 5px;
  outline: none
}

select:focus {
  border: 2px solid #ff9800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>stock 1</h3>
  <select name="tracker[stockitems][0]" class="update-select">
    <option value=""></option>
    <option value="1" selected>tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 2</h3>
  <select name="tracker[stockitems][1]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3" selected>tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 3</h3>
  <select name="tracker[stockitems][2]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

Answer 1

就这么简单。只需.show() 所有option 并使用您之前的代码重新初始化select。

$(document).ready(function() {

  function intializeSelect() {
    // this "initializes the boxes"
    $('.update-select').each(function(box) {
      var value = $('.update-select')[box].value;
      if (value) {
        $('.update-select').not(this).find('option[value="' + value + '"]').hide();
      }
    });
  };

  intializeSelect();

  // this is called every time a select box changes
  $('.update-select').on('change', function(event) {
    $('.update-select').find('option').show();
    intializeSelect();
  });
});

* {
  box-sizing: border-box;
  font-size: 1em;
  font-family: sans-serif;
}

body {
  display: flex;
  float: right;
}

body div {
  margin: 20px;
}

select {
  border: 2px solid #78909c;
  padding: 10px;
  border-radius: 5px;
  outline: none
}

select:focus {
  border: 2px solid #ff9800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>stock 1</h3>
  <select name="tracker[stockitems][0]" class="update-select">
    <option value=""></option>
    <option value="1" selected>tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 2</h3>
  <select name="tracker[stockitems][1]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3" selected>tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

<div>
  <h3>stock 3</h3>
  <select name="tracker[stockitems][2]" class="update-select">
    <option value=""></option>
    <option value="1">tracker 1</option>
    <option value="3">tracker 2</option>
    <option value="4">test tracker1</option>
    <option value="6">another tracker</option>
    <option value="9">the last tracker</option>
  </select>
</div>

Answer 2

这是我的解决方案：

$(document).ready(function() {
    $(document).on('change', '.update-select', function(e) {
        $('option').show();

        var selectedOptionsGlobal = [];

        $.each($('.update-select'), function(key, select) {
            var selectedOptionValue = $(select).val();

            if (selectedOptionValue !== "") {
                selectedOptionsGlobal.push(selectedOptionValue);
            }
        });

        for (var i = 0; i < selectedOptionsGlobal.length; i++) {
            $('option[value="'+selectedOptionsGlobal[i]+'"]').hide();
        }
    });
});