js ComboBox 下拉选择框 多选

对于实现多选的下拉选择框（ComboBox），可以使用以下方法：

1. 使用原生 JavaScript：
- 创建一个 `<select>` 元素作为下拉框容器。
- 添加 `multiple` 属性，使其支持多选。
- 添加 `<option>` 元素作为选项，并设置合适的值和文本。
- 使用 JavaScript 通过操作 `<select>` 元素的 `options` 属性来获取和设置选中的选项。

示例代码：

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

   <script>
     var comboBox = document.getElementById("myComboBox");
     // 获取选中的选项
     var selectedOptions = Array.from(comboBox.options)
       .filter(option => option.selected)
       .map(option => option.value);
     console.log(selectedOptions);

     // 设置选中的选项
     comboBox.options[0].selected = true;
     comboBox.options[1].selected = true;
   </script>

2. 使用第三方库：
- 例如，可以使用 jQuery UI 的 ComboBox 组件或 Select2 插件来实现多选下拉选择框。这些库提供了更丰富的功能和更好的用户体验。

示例代码（使用 Select2）：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

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

   <script>
     $(document).ready(function() {
       $("#myComboBox").select2();
     });
   </script>

以上是两种常见的实现多选的下拉选择框方法，你可以根据需要选择其中一种来使用。