不使用querySelector和addEventListener实现动态下拉复选框
时间: 2023-07-16 07:14:06 浏览: 45
可以使用原生JavaScript实现动态下拉复选框,以下是一个简单的实现示例:
HTML代码:
```html
<select id="mySelect" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
```
JavaScript代码:
```javascript
// 获取select元素
var select = document.getElementById("mySelect");
// 创建复选框元素
var checkboxes = [];
for (var i = 0; i < select.options.length; i++) {
var option = select.options[i];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.value = option.value;
checkbox.text = option.text;
checkboxes.push(checkbox);
}
// 将复选框元素添加到select元素中
for (var i = 0; i < checkboxes.length; i++) {
select.options[i] = new Option(checkboxes[i].text, checkboxes[i].value);
select.options[i].appendChild(checkboxes[i]);
}
// 监听select元素的change事件,更新选中状态
select.addEventListener("change", function() {
for (var i = 0; i < select.options.length; i++) {
var option = select.options[i];
var checkbox = option.getElementsByTagName("input")[0];
checkbox.checked = option.selected;
}
});
```
以上代码会将原本的下拉框转化为带有复选框的下拉框,用户可以通过勾选复选框来选择多个选项。当用户选择下拉框中的选项时,JavaScript代码会自动更新复选框的选中状态。