ie实现下拉多选框,不使用addEventListener方法,每句话注释
时间: 2023-07-30 20:07:01 浏览: 140
一个简单的实现多选的下拉框
3星 · 编辑精心推荐
首先,我们需要在HTML文件中定义一个下拉多选框的结构,可以使用select和option标签来实现,例如:
```html
<select id="mySelect" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
```
其中,id属性为mySelect,multiple属性表示该下拉框可以多选。
接下来,在JavaScript文件中获取该下拉框的DOM对象,可以使用document.getElementById方法,例如:
```javascript
var select = document.getElementById("mySelect");
```
然后,我们需要为该下拉框添加选项的点击事件,以便用户可以选择或取消选择某个选项,可以使用select.options[i].selected属性来判断某个选项是否被选中,例如:
```javascript
for (var i = 0; i < select.options.length; i++) {
select.options[i].onclick = function () {
if (this.selected) {
console.log("选中了选项" + this.value);
} else {
console.log("取消选中选项" + this.value);
}
};
}
```
最后,我们可以在控制台中输出用户选择的选项,例如上面的代码会在控制台中输出“选中了选项1”、“取消选中选项2”等信息。
需要注意的是,上面的代码中没有使用addEventListener方法,而是直接给每个选项绑定了onclick事件,这种做法虽然简单,但不够优雅和灵活,如果需要添加更多的事件监听器,建议使用addEventListener方法。
阅读全文