我有三个选择菜单，每个菜单中都有相同的日期位列表，目的是让用户选择第一，第二和第三个首选项。我希望通过在所有选择菜单中禁用所选选项来阻止他们在所有三个选择菜单中多次选择一个时隙。 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>
答案 0 :(得分：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。