js 实现多选

实现多选功能的方法

在JavaScript中实现多选功能可以通过多种方式完成，以下是几种常见的方法：

使用复选框（Checkbox） 通过HTML的<input type="checkbox">元素实现多选。用户可以选择多个选项，选中的值可以通过JavaScript获取。

<input type="checkbox" name="option" value="option1"> Option 1
<input type="checkbox" name="option" value="option2"> Option 2
<input type="checkbox" name="option" value="option3"> Option 3

document.querySelectorAll('input[name="option"]:checked').forEach(checkbox => {
  console.log(checkbox.value);
});

使用<select multiple>元素 HTML的<select>元素添加multiple属性后，允许用户通过按住Ctrl或Shift键选择多个选项。

<select multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

const selectedOptions = Array.from(document.querySelector('select').selectedOptions)
  .map(option => option.value);
console.log(selectedOptions);

使用自定义UI组件 可以通过JavaScript和CSS构建自定义的多选组件，通常结合复选框或列表实现更灵活的交互。

<div class="multi-select">
  <div class="option" data-value="option1">Option 1</div>
  <div class="option" data-value="option2">Option 2</div>
  <div class="option" data-value="option3">Option 3</div>
</div>

document.querySelectorAll('.multi-select .option').forEach(option => {
  option.addEventListener('click', () => {
    option.classList.toggle('selected');
    const selectedValues = Array.from(document.querySelectorAll('.multi-select .option.selected'))
      .map(el => el.dataset.value);
    console.log(selectedValues);
  });
});

使用第三方库 如果需要更复杂的功能（如搜索、分组等），可以使用第三方库如：

• Select2（https://select2.org）
• Choices.js（https://choices-js.github.io/Choices/）

// 使用Select2示例
$('select').select2({
  multiple: true
});

注意事项

• 对于大量选项，建议使用虚拟滚动优化性能。
• 移动端需考虑触摸交互的兼容性。
• 选中状态应明确反馈给用户，通常通过高亮或标记实现。