JavaScript实现select添加option

JavaScript轻松为Select添加Option

在网页开发中，我们经常需要动态地为Select元素添加Option。使用JavaScript，这一操作变得非常简单。以下是一个生动的示例，供有需要的小伙伴参考。

我们在HTML文档中创建一个基本的结构：

```html

```

接下来，我们使用JavaScript来添加Select元素和多个Option：

```javascript

window.onload = function() {

// 创建Select控件

var selectBox = document.createElement("SELECT");

// 循环添加Option

for(var i = 1; i <= 10; i++) {

var option = document.createElement("OPTION");

option.text = option.value = i; // 设置option的显示文本和值

selectBox.add(option); // 将option添加到selectBox中

}

// 当选中的值发生改变时，执行以下操作

selectBox.onchange = function() {

alert("您选择了：" + this.value); // 弹出选中的值

};

// 将Select控件添加到body中

document.body.appendChild(selectBox);

};

```

当页面加载完成时，上述代码会在页面上创建一个带有10个Option的Select控件。每当选中的Option发生变化时，都会弹出一个提示框，显示被选中的值。

这样，你就可以轻松地使用JavaScript为Select添加Option了。希望这个示例能帮助到你，如果你还有其他问题或需要进一步的解释，请随时提问。这是一个简单实用的技巧，希望你喜欢！