原生select多选
时间: 2023-08-02 07:01:54 浏览: 141
原生select多选是指在HTML中使用select元素,并设置multiple属性,允许用户选择多个选项的功能。
在原生select多选中,用户可以按住Ctrl键或者Shift键,然后点击选项,来选择多个选项。已选择的选项会显示为高亮。
当用户选择完毕后,我们可以通过JavaScript来获取被选中的选项。可以使用select元素的options属性来获取所有的选项,然后遍历每个选项,通过判断selected属性是否为true来确定该选项是否被选中。
例如,假设我们有一个原生select元素的id为"mySelect",我们可以使用以下代码来获取被选中的选项:
```javascript
var selectElement = document.getElementById("mySelect");
var selectedOptions = [];
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].selected) {
selectedOptions.push(selectElement.options[i].value);
}
}
console.log(selectedOptions);
```
上述代码将获取到的被选中的选项值存储在一个数组中,并通过控制台输出。
总结起来,原生select多选是一种在HTML中使用select元素来实现多选功能的方式。我们可以通过设置multiple属性,使得用户可以选择多个选项,并通过JavaScript来获取被选中的选项。
阅读全文