跨多个选择菜单的jQuery同步属性
跨多个选择菜单的jQuery同步属性
提问于 2018-06-15 21:46:35
我有三个选择菜单与相同的日期插槽列表在每个，目的是用户选择一个第一，第二和第三优先。我希望通过在所有选择菜单中禁用所选选项，防止他们在所有三个选择菜单中多次选择一个时隙。我目前的解决方案工作到一定程度，但一旦选择了不同的选项，就不会重新启用选项。
我认为我需要跟踪所有选择菜单的选中选项，以便知道在更改选项时重新启用哪些菜单。
我感谢你事先给予我的关注。
$(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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-15 23:01:36
这里有一种方法：
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不多。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50883057
复制相关文章
相似问题
腾讯云开发者
