Javascript之DOM(下拉列表操作)_获取el-select下拉框dom-优快云博客

本文链接：https://blog.youkuaiyun.com/summer7310/article/details/29223171

本文详细介绍了如何在HTML中通过设置下拉列表框的options集合的长度清空原有选项，并通过Option对象创建并添加新选项，实现联动效果。通过实例展示了如何根据选择的省份或直辖市动态填充对应的城市选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下拉列表框select的操作和其他操作有一些区别，选项存放在options集合中，实现联动效果

<html>
	<head>
		<meta charset="utf-8" />
		<title>联动效果</title>
		<style type="text/css">
			body,table,th,td{font-size:12px;}
			#tabScore{ border-collapse: collapse;}
			#tabScore th{ padding: 5px;}
			#tabScore td{ padding: 5px;}
		</style>
		<script type= "text/javascript">
			function choose(){
				var pSel = document.getElementById("province").value;
				var city = document.getElementById("city");
				//删除下拉列表框中原有的所有选项
				city.options.length = 0;
				if(pSel == "重庆"){
					//创建下拉列表框选项
					var cq = new Option("重庆", "重庆");
					//将选项添加到下拉框中
					city.options.add(cq);
					var wz = new Option("万州", "万州");
					city.options.add(wz);
					var kx = new Option("开县", "开县");
					city.options.add(kx);
					var hc = new Option("合川", "合川");
					city.options.add(hc);
				}
				else if (pSel == "浙江"){
					var hz = new Option("杭州", "杭州");
					city.options.add(hz);
					var sx = new Option("绍兴", "绍兴");
					city.options.add(sx);
					var wz = new Option("温州", "温州");
					city.options.add(wz);
					var tz = new Option("台州", "台州");
					city.options.add(tz);
				}
			}
			function addScore() {
				//得到输入数据
				var name = document.getElementById("userName").value;
				var java = document.getElementById("java").value;
				var html = document.getElementById("html").value;
				var sql = document.getElementById("sql").value;
				var count = parseInt(java) + parseInt(html) + parseInt(sql);
				//得到表格
				var tab = document.getElementById("tabScore");
				//创建行
				var row = tab.insertRow();
				//在行上添加单元格
				var td_name = row.insertCell();
				td_name.style.textAlign = "center";
				td_name.innerText = name;
				var td_java = row.insertCell();
				td_java.style.textAlign = "center";
				td_java.innerText = java;				
			}
		</script>	
	</head>
	<body>
		<center>
			<select id="province" onChange="choose()">
				<option value="重庆">重庆</option>
				<option value="浙江">浙江</option>
			</select>省（/直辖市）
			  
			<select id ="city">
				<option value= "重庆">重庆</option>>
				<option value= "万州">万州</option>
				<option value= "开县">开县</option>
				<option value= "合川">合川</option>
			</select>
		</center>
		<center>
			姓名：<input type="text" id="userName" size="10"/> 
			java: <input type="text" id="java" size="3" maxlength="2"/> 
		</center>
		<input type="button" value="添加" onclick="addScore()"/>
		<hr size="1" color="red"/>
		<table id="tabScore" width="470" border="1" bordercolor="blue" align="center">
			<tr bgcolor="red">
				<th>姓名</th><th>java</th><th>html</th><th>sql</th><th>总成绩</th>
			<tr>
			<tr>
				<td align="center">张三</td>
				<td align="center">85</td>
				<td align="center">11</td>
				<td align="center">23</td>
				<td align="center">44</td>
			</tr>
			<tr>
				<td align="center">李四</td>
			</tr>

	</body>
</html>

通过设置城市下拉列表框的options集合的长度清空原有选项，通过Option对象创建选项，使用options集合的add方法添加选项到下拉列表框中。