javascript - 唯一选择选项值

Question

我有 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>

Answer 1

您可以使用 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>