javascript - 如何根据不同选择的变化隐藏一系列选择中的选项？

Question

相关JSFiddle

<form id="calendar_form">
    <div class="day1">
        Day 1
        <table class="selector_table">
            <select name="select1">
                <option></option>
                <option value="optionA">PersonA</option>
                <option value="optionB">PersonB</option>
            </select>
            <select name="select2">
                <option></option>
                <option value="optionA">PersonA</option>
                <option value="optionB">PersonB</option>
            </select>
        </table>
    </div>
    <br>
    <div class="day2">
        Day 2
        <table class="selector_table">
            <select name="select3">
                <option></option>
                <option value="optionA">PersonA</option>
                <option value="optionB">PersonB</option>
            </select>
            <select name="select4">
                <option></option>
                <option value="optionA">PersonA</option>
                <option value="optionB">PersonB</option>
            </select>
        </table>
    </div>
</form>
<script>
    $("select").change(function(){
        var selectThatWasChanged = $(this).attr('id');
        var valueToRemove = $(this).val();
        var dayWorkingWith = $(this).closest('.selector_table');
        $('option', dayWorkingWith).not('#' + selectThatWasChanged + ' option');
        $('option[value="' + valueToRemove + '"]').not('#' + selectThatWasChanged + ' option').hide();
    });
</script>

我已经玩了一个小时了，我很沮丧。叹。我想要完成的是:如果在第 1 天选择了 PersonA，那么在第 1 天的任何地方都不应该可以再次选择他。但是，PersonA 在第 2 天应该仍然可用。

目前，如果选择了 PersonA，则从所有其他选择中删除 PersonA。我试图通过使用 closest('.selector_table') 来磨练相关的选择。

我做错了什么？

非常感谢您!

额外的基本问题:“撤消”更改是否需要大量工作。例如，如果有人选择了 PersonA，它会按照描述隐藏 PersonA，但是如果此后在同一个选择上选择了 PersonB，它会撤消该更改并且 PersonA 再次可用？

Answer 1

将 change 事件应用于选择元素，获取同级 select 并禁用它的匹配 option 元素。

$("select").change(function() {
  const selectedOptionVal = $(this).find(":selected")[0].value;
  const sibSelectEle = $(this).siblings('select');
  sibSelectEle.children('option').each(function(_, option) {
    if (selectedOptionVal == option.value) {
      $(option).attr("disabled", true);
    } else {
      $(option).attr("disabled", false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="calendar_form">
  <div class="day1">
    Day 1
    <table class="selector_table">
      <select name="select1">
        <option></option>
        <option value="optionA">PersonA</option>
        <option value="optionB">PersonB</option>
      </select>
      <select name="select2">
        <option></option>
        <option value="optionA">PersonA</option>
        <option value="optionB">PersonB</option>
      </select>
    </table>
  </div>
  <br>
  <div class="day2">
    Day 2
    <table class="selector_table">
      <select name="select3">
        <option></option>
        <option value="optionA">PersonA</option>
        <option value="optionB">PersonB</option>
      </select>
      <select name="select4">
        <option></option>
        <option value="optionA">PersonA</option>
        <option value="optionB">PersonB</option>
      </select>
    </table>
  </div>
</form>