HTML 中不使用 Ctrl 键实现 Select 元素多选

javascript

2024-04-01 18:01:05

在 HTML 中不使用 Ctrl 键实现 Select 元素多选

问题：

默认情况下，HTML select 元素只允许用户单选。在某些情况下，我们需要用户能够同时选择多个选项，而无需按住 Ctrl 键。

解决方法：

有两种方法可以在不使用 Ctrl 键的情况下实现 select 元素的多选：

1. 使用 jQuery

步骤：

使用 multiple="multiple" 属性启用 select 元素的多选功能。
使用 jQuery 监听选项的 click 事件。
切换选项的 selected 属性以选择或取消选择选项。

代码：

<select multiple="multiple" id="my-select">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
</select>

<script>
  $("#my-select").on("click", "option", function() {
    $(this).prop("selected", !$(this).prop("selected"));
  });
</script>

2. 使用纯 JavaScript

步骤：

使用 multiple="multiple" 属性启用 select 元素的多选功能。
使用 addEventListener() 监听选项的 click 事件。
使用 toggle() 方法切换选项的 selected 属性。

代码：

<select multiple="multiple" id="my-select">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
</select>

<script>
  document.getElementById("my-select").addEventListener("click", function(e) {
    if (e.target.tagName === "OPTION") {
      e.target.toggleAttribute("selected");
    }
  });
</script>