Select add() 方法
JavaScript基础 2022-06-08 17:10:52小码哥的IT人生shichen
Select add() 方法
实例
例子 1
在下拉列表末尾添加 "Kiwi" 选项：
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option);
完整实例：
<!DOCTYPE html>
<html>
<body>
<form>
<select id="mySelect" size="8">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
</form>
<br>
<p>单击该按钮可在下拉列表末尾添加“猕猴桃”选项。</p>
<button type="button" onclick="myFunction()">插入选项</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "猕猴桃";
x.add(option);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2
在下拉列表的开头添加 "Kiwi" 选项：
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option, x[0]);
完整实例：
<!DOCTYPE html>
<html>
<body>
<form>
<select id="mySelect" size="8">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
</form>
<br>
<p>单击该按钮可在下拉列表的开头（“苹果”之前）添加“猕猴桃”选项。</p>
<button type="button" onclick="myFunction()">插入选项</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "猕猴桃";
x.add(option, x[0]);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 3
在下拉列表的索引位置 "2" 处添加 "Kiwi" 选项：
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Kiwi";
x.add(option, x[2]);
完整实例：
<!DOCTYPE html>
<html>
<body>
<form>
<select id="mySelect" size="8">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
</form>
<br>
<p>单击该按钮可在下拉列表的索引位置“2”（“香蕉”之前）添加一个“猕猴桃”选项。</p>
<button type="button" onclick="myFunction()">插入选项</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "猕猴桃";
x.add(option, x[2]);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 4
在下拉列表中的所选定的选项之前添加一个选项：
var x = document.getElementById("mySelect");
if (x.selectedIndex >= 0) {
var option = document.createElement("option");
option.text = "Kiwi";
var sel = x.options[x.selectedIndex];
x.add(option, sel);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<form>
<select id="mySelect" size="8">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
</form>
<br>
<p>在下拉列表中选择一个选项。然后点击下面的按钮，在选中的选项前添加一个“猕猴桃”选项。</p>
<button type="button" onclick="myFunction()">在被选项之前插入新选项</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
if (x.selectedIndex >= 0) {
var option = document.createElement("option");
option.text = "猕猴桃";
var sel = x.options[x.selectedIndex];
x.add(option, sel);
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
selectObject.add(option, index)
参数值
| 参数 | 描述 |
|---|---|
| option | 必需。规定要添加的选项。必须是 option 或 optgroup 元素。 |
| index |
可选。整数，规定应该插入新选项元素的索引位置。索引从 0 开始。 如果未规定索引，则新选项将插入列表末尾。 |
技术细节
返回值：
无返回值。
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
