js select多选

在 JavaScript 中，可以通过以下代码实现 select 元素的多选：

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

在 select 元素上添加 multiple 属性，即可开启多选功能。用户可以按住 Ctrl 键或 Shift 键来进行多选。在 JavaScript 中，可以通过以下代码获取 select 元素选中的值：

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

selectedOptions 数组包含了 select 元素中所有被选中的 option 元素的值。

相关问题

原生js select 多选

在JavaScript中，原生`<select>`元素默认只能单选，如果你想要创建一个多选框（Multiple Selection），你可以采用一些技巧或者借助第三方库来实现。以下是一种基本的手动实现方法：

<select multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <!-- 更多选项... -->
</select>

<script>
// JavaScript部分用于获取选择项并操作
var selects = document.querySelectorAll('select[multiple]');
selects.forEach(function(select) {
  select.addEventListener('change', function() {
    // 当多选框发生变化时，这里可以获取用户的选择
    var selectedOptions = Array.from(select.options).filter(function(option) { return option.selected; });
    console.log('用户选择了:', selectedOptions.map(function(option) { return option.value; }));
  });
});
</script>

在这个例子中，我们添加了`multiple`属性到`<select>`标签，使得它变为一个多选框。然后通过`addEventListener`监听`change`事件，每当用户做出选择时，就会触发回调函数，获取并处理已选中的选项。

请注意，现代浏览器通常提供了更完善的API，比如`HTMLSelectElement`的`elements`属性可以直接返回所有选中的选项。然而，上述代码适用于较老的浏览器版本。

html js select 多选，把arr数组中username都设置为selected

您可以使用以下代码将arr数组中的所有username选中：

var arr = ["username1", "username2", "username3"];
var select = document.getElementById("selectId"); //获取select元素
for(var i = 0; i < select.options.length; i++) { //遍历select选项
    if(arr.indexOf(select.options[i].value) > -1) { //如果select选项的值在arr数组中
        select.options[i].selected = true; //将该选项设为选中状态
    }
}

这段代码中，我们首先通过getElementById方法获取select元素，然后在for循环中遍历select选项，判断每个选项的值是否在arr数组中，如果是，则将该选项设为选中状态。