javascript - 唯一选择选项值

标签 javascript jquery html-select

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

相关文章:

javascript - 使用 jQuery Mobile 并排显示 2 个按钮

javascript - 为什么这些对象属性未定义?

javascript - Select 在初始更改时返回错误值

javascript - 将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值

javascript - JavaScript 变量作用域/OOP 和回调函数需要帮助

javascript - 类别 block 有 DISPLAY :none - Prestashop

javascript - 在 JavaScript 中将字符串转换为十进制数

javascript - jquery向页面添加HTML代码

javascript - 删除表格行中的按钮

javascript - 如何使用 jquery 查找多选标签的最新选定项目?