循环添加select以及option值
时间: 2023-12-14 14:40:14 浏览: 71
向<select>元素中动态添加option
你可以使用 JavaScript 来动态添加 select 和 option 标签及其值。以下是一个示例代码,可以根据需要进行修改:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Select Options Dynamically</title>
</head>
<body>
<button onclick="addSelect()">Add Select</button>
<script>
function addSelect() {
// 创建 select 元素
var select = document.createElement("select");
// 创建 option 元素并添加到 select 中
var option1 = document.createElement("option");
option1.value = "value1";
option1.text = "Option 1";
select.add(option1);
var option2 = document.createElement("option");
option2.value = "value2";
option2.text = "Option 2";
select.add(option2);
var option3 = document.createElement("option");
option3.value = "value3";
option3.text = "Option 3";
select.add(option3);
// 将 select 添加到页面中
document.body.appendChild(select);
}
</script>
</body>
</html>
```
以上代码中,当点击按钮时,会创建一个 select 元素,并添加三个 option 元素,然后将 select 添加到页面中。你可以根据需要修改 option 的值和文本,以及添加更多的 option 元素。
阅读全文