我有 3 个选择语句,每个语句共享相同的 5 个选项。
如何确保在其中一个选项中选择某个选项时,它不会出现在其他选项中?
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
最佳答案
您可以使用 HTML5 hidden
属性。如果您需要非 HTML5 支持,请使用 disabled
属性。请注意,jQuery .hide()
并非在所有浏览器中都有效。
$(function () {
$('select').change(function() {
var used = new Set;
$('select').each(function () {
var reset = false;
$('option', this).each(function () {
var hide = used.has($(this).text());
if (hide && $(this).is(':selected')) reset = true;
$(this).prop('hidden', hide);
});
if (reset) $('option:not([hidden]):first', this).prop('selected', true);
used.add($('option:selected', this).text());
});
}).trigger('change'); // run at load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
此解决方案将在第二个下拉列表中减少一个可用选项,并在第三个下拉列表中减少两个选项。在第一个下拉列表中选择已使用的选项将更改其他下拉列表的选择。
替代方案
另一种方法是仅使用一个选择
,并允许用户进行多项选择,并使用代码来防止选择超过 3 个项目:
$('select').change(function() {
if ($(':selected', this).length > 3) {
$(':selected', this).slice(3).prop('selected', false);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size=5>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
关于javascript - 唯一选择选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41601682/