javascript - 跨多个选择菜单的 jQuery 同步属性

Question

我有三个选择菜单，每个菜单都有相同的日期槽列表，目的是让用户选择第一、第二和第三偏好。我希望通过禁用所有选择菜单中的选定选项来防止他们在所有三个选择菜单中多次选择一个时间段。 My current solution工作到一定程度，但一旦选择了不同的选项就不会重新启用选项。

我想我需要跟踪所有选择菜单的选中选项，以便我知道在更改选项时要重新启用哪些选项。

非常感谢您的关注。

HTML

$(document).ready(function() {
  "use strict";
  $("select").change(function() {
    // Get index of selected option element
    let checkedIndex = $(':checked', this).index();
    // Loop through all option elements across all select elements
    $('option').each(function() {
      // Get index of all option elements
      let optionIndex = $(this).index();
      // If the selected option index matches another option
      if (optionIndex === checkedIndex) {
        let optionDisabled = $(this).prop('disabled');
        $(this).prop('disabled', true);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fsLocal" class="fsBody">
  <form method="post" novalidate action="#" class="fsForm fsSingleColumn fsMaxCol1" id="fsForm3097614">
    <div class="fsPage" id="fsPage3097614-1">
      <div class="fsSection fs1Col">
        <div class="fsSectionHeader">
          <h2 class="fsSectionHeading">Time slots</h2>
        </div>
        <div id="fsRow3097614-1" class="fsRow fsFieldRow fsLastRow">
          <div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical fsSpan100" id="fsCell65519762" lang="en" fs-field-type="select">
            <label id="label65519762" class="fsLabel" for="field65519762">First preference </label>
            <select id="field65519762" name="field65519762" size="1" class="fsField">
              <option value="Please select">Please select</option>
              <option value="Slot 1: 1 Feb 2019">Slot 1: 1 Feb 2019</option>
              <option value="Slot 2: 4-8 Feb 2019">Slot 2: 4-8 Feb 2019</option>
              <option value="Slot 3: 11-15 Feb 2019">Slot 3: 11-15 Feb 2019</option>
              <option value="Slot 4: 18-22 Feb 2019">Slot 4: 18-22 Feb 2019</option>
              <option value="Slot 5: 25 Feb – 1 March 2019">Slot 5: 25 Feb – 1 March 2019</option>
              <option value="Slot 6: 4-8 March 2019">Slot 6: 4-8 March 2019</option>
              <option value="Slot 7: 11-15 March 2019">Slot 7: 11-15 March 2019</option>
              <option value="Slot 8: 18-22 March 2019">Slot 8: 18-22 March 2019</option>
              <option value="Slot 9: 25-29 March 2019">Slot 9: 25-29 March 2019</option>
              <option value="Slot 10: 1-5 April 2019">Slot 10: 1-5 April 2019</option>
              <option value="Slot 11: 8-12 April 2019">Slot 11: 8-12 April 2019</option>
              <option value="Slot 12: 15-19 April 2019">Slot 12: 15-19 April 2019</option>
              <option value="Slot 13: 22-26 April 2019">Slot 13: 22-26 April 2019</option>
              <option value="Slot 14: 29 April – 3 May 2019">Slot 14: 29 April – 3 May 2019</option>
              <option value="Slot 15: 6-10 May 2019">Slot 15: 6-10 May 2019</option>
              <option value="Slot 16: 13-17 May 2019">Slot 16: 13-17 May 2019</option>
              <option value="Slot 17: 20-24 May 2019">Slot 17: 20-24 May 2019</option>
              <option value="Slot 18: 27-31 May 2019">Slot 18: 27-31 May 2019</option>
            </select>
          </div>
        </div>
        <div id="fsRow3097614-2" class="fsRow fsFieldRow fsLastRow">
          <div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical fsSpan100" id="fsCell65519769" lang="en" fs-field-type="select">
            <label id="label65519769" class="fsLabel" for="field65519769">Second preference </label>
            <select id="field65519769" name="field65519769" size="1" class="fsField">
              <option value="Please select">Please select</option>
              <option value="Slot 1: 1 Feb 2019">Slot 1: 1 Feb 2019</option>
              <option value="Slot 2: 4-8 Feb 2019">Slot 2: 4-8 Feb 2019</option>
              <option value="Slot 3: 11-15 Feb 2019">Slot 3: 11-15 Feb 2019</option>
              <option value="Slot 4: 18-22 Feb 2019">Slot 4: 18-22 Feb 2019</option>
              <option value="Slot 5: 25 Feb – 1 March 2019">Slot 5: 25 Feb – 1 March 2019</option>
              <option value="Slot 6: 4-8 March 2019">Slot 6: 4-8 March 2019</option>
              <option value="Slot 7: 11-15 March 2019">Slot 7: 11-15 March 2019</option>
              <option value="Slot 8: 18-22 March 2019">Slot 8: 18-22 March 2019</option>
              <option value="Slot 9: 25-29 March 2019">Slot 9: 25-29 March 2019</option>
              <option value="Slot 10: 1-5 April 2019">Slot 10: 1-5 April 2019</option>
              <option value="Slot 11: 8-12 April 2019">Slot 11: 8-12 April 2019</option>
              <option value="Slot 12: 15-19 April 2019">Slot 12: 15-19 April 2019</option>
              <option value="Slot 13: 22-26 April 2019">Slot 13: 22-26 April 2019</option>
              <option value="Slot 14: 29 April – 3 May 2019">Slot 14: 29 April – 3 May 2019</option>
              <option value="Slot 15: 6-10 May 2019">Slot 15: 6-10 May 2019</option>
              <option value="Slot 16: 13-17 May 2019">Slot 16: 13-17 May 2019</option>
              <option value="Slot 17: 20-24 May 2019">Slot 17: 20-24 May 2019</option>
              <option value="Slot 18: 27-31 May 2019">Slot 18: 27-31 May 2019</option>
            </select>
          </div>
        </div>
        <div id="fsRow3097614-3" class="fsRow fsFieldRow fsLastRow">
          <div class="fsRowBody fsCell fsFieldCell fsFirst fsLast fsLabelVertical fsSpan100" id="fsCell65519770" lang="en" fs-field-type="select">
            <label id="label65519770" class="fsLabel" for="field65519770">Third preference </label>
            <select id="field65519770" name="field65519770" size="1" class="fsField">
              <option value="Please select">Please select</option>
              <option value="Slot 1: 1 Feb 2019">Slot 1: 1 Feb 2019</option>
              <option value="Slot 2: 4-8 Feb 2019">Slot 2: 4-8 Feb 2019</option>
              <option value="Slot 3: 11-15 Feb 2019">Slot 3: 11-15 Feb 2019</option>
              <option value="Slot 4: 18-22 Feb 2019">Slot 4: 18-22 Feb 2019</option>
              <option value="Slot 5: 25 Feb – 1 March 2019">Slot 5: 25 Feb – 1 March 2019</option>
              <option value="Slot 6: 4-8 March 2019">Slot 6: 4-8 March 2019</option>
              <option value="Slot 7: 11-15 March 2019">Slot 7: 11-15 March 2019</option>
              <option value="Slot 8: 18-22 March 2019">Slot 8: 18-22 March 2019</option>
              <option value="Slot 9: 25-29 March 2019">Slot 9: 25-29 March 2019</option>
              <option value="Slot 10: 1-5 April 2019">Slot 10: 1-5 April 2019</option>
              <option value="Slot 11: 8-12 April 2019">Slot 11: 8-12 April 2019</option>
              <option value="Slot 12: 15-19 April 2019">Slot 12: 15-19 April 2019</option>
              <option value="Slot 13: 22-26 April 2019">Slot 13: 22-26 April 2019</option>
              <option value="Slot 14: 29 April – 3 May 2019">Slot 14: 29 April – 3 May 2019</option>
              <option value="Slot 15: 6-10 May 2019">Slot 15: 6-10 May 2019</option>
              <option value="Slot 16: 13-17 May 2019">Slot 16: 13-17 May 2019</option>
              <option value="Slot 17: 20-24 May 2019">Slot 17: 20-24 May 2019</option>
              <option value="Slot 18: 27-31 May 2019">Slot 18: 27-31 May 2019</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 1

这是一种实现方式:

https://codepen.io/anon/pen/oyGMMK?editors=0010

$(document).ready(function() {
    "use strict";

    var $selects = $('select');
    var $selectOptions = $selects.find('option');

    $selects.on('change', function() {
        // get all selected values in an array, remove the "Please select" empty values
        var selectedValues = $selects
            .find(':selected')
            .map(function() {
                return this.value;
            })
            .get()
            .filter(Boolean);

        // enable all
        $selectOptions.prop('disabled', false);

        // disable the selected values across all selects
        selectedValues.forEach(function(val) {
            $selects.find('option[value="' + val + '"]').prop('disabled', true);
        });

        // enable this value in this select
        $(this).find('option[value="' + this.value + '"]').prop('disabled', false);
    });
});

可能有更好的方法，最近我写的 jQuery 不多。