实现动态下拉复选框,能够动态输入选项并获取选中列表,同时不使用querySelector和addEventListener方法
时间: 2023-07-16 08:14:26 浏览: 52
可以使用原生的JavaScript实现动态下拉复选框,并获取选中列表。以下是一个简单的示例:
HTML代码:
```
<select id="mySelect" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
```
JavaScript代码:
```javascript
// 获取select元素
var select = document.getElementById("mySelect");
// 创建新的option元素
var newOption = document.createElement("option");
newOption.text = "Option 4";
newOption.value = "option4";
// 将新的option元素添加到select元素
select.add(newOption);
// 获取选中的选项
var selectedOptions = [];
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].selected) {
selectedOptions.push(select.options[i].value);
}
}
console.log(selectedOptions);
```
这段代码使用了原生的DOM API,而没有使用querySelector和addEventListener方法。它首先获取了select元素,然后创建一个新的option元素并将其添加到select元素中。最后,它遍历select元素的所有选项,并将选中的选项的值添加到一个数组中,用于进一步处理。