我有三个选择菜单，每个菜单都有相同的日期槽列表，目的是让用户选择第一、第二和第三偏好。我希望通过禁用所有选择菜单中的选定选项来防止他们在所有三个选择菜单中多次选择一个时间段。我当前的解决方案在一定程度上有效，但一旦选择了不同的选项，就不会重新启用选项。
我想我需要跟踪所有选择菜单的选中选项，以便我知道在更改选项时要重新启用哪些选项。
感谢您提前的关注。
.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>这里有一种方法可以做到这一点：
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。