js中动态给select添加option的两种方法(制作下拉列表)

最新推荐文章于 2024-02-02 15:50:20 发布

Hairui瑞

最新推荐文章于 2024-02-02 15:50:20 发布

阅读量1.6w

点赞数 5

分类专栏：前端文章标签： js option 动态添加节点

本文链接：https://blog.csdn.net/qq_44322357/article/details/102691343

版权

前端专栏收录该内容

17 篇文章

订阅专栏

js中可以动态的给select添加option，下面来看看常用的两种方法

效果图

一、通过appendchild来动态添加option

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select动态添加</title>
	</head>
	<script type="text/javascript">
		window.onload = function(){
			var sel = document.getElementById("sel");
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				var opt = document.createElement("option");
				opt.innerHTML = "this is option";
				sel.appendChild(opt);
			}
		}
	</script>
	<body>
		<select id = "sel">
			<option>---请选择---</option>
		</select>
		<input type="button"  id="btn" value="添加" />
	</body>
</html>

二、通过options.add(string，value)添加option

第一个属性代表标签内的内容，第二个代表value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select动态添加</title>
	</head>
	<script type="text/javascript">
		window.onload = function(){
			var sel = document.getElementById("sel");
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				var opt = new Option("123456",01);//第一个代表标签内的内容，第二个代表value
				sel.options.add(opt);
			}
		}
	</script>
	<body>
		<select id = "sel">
			<option>---请选择---</option>
		</select>
		<input type="button"  id="btn" value="添加" />
	</body>
</html>