JavaScript对Select控件的操作-优快云博客

本文档通过JavaScript实现了一个动态更新下拉菜单选项的例子。当点击按钮后，下拉菜单的内容会被清除并重新填充两个新的选项：中国和美国。此外，还设置了一个改变事件，当选择不同的选项时会弹窗显示所选选项的值。

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>test Child</title>
		<script type="text/javascript">

			function updateModel()
			{
				var models =  document.getElementById("model");
				while(models.childNodes.length>0)
				{
					models.removeChild(models.childNodes[0]);
				}
				var models = document.getElementById("model");
				var option = document.createElement("option");
				option.appendChild(document.createTextNode("The peple's Republic of China"));
				option.setAttribute("value","China");
				models.appendChild(option);

				var option = document.createElement("option");
				option.setAttribute("value","American");
				option.appendChild(document.createTextNode("The united states of American"));
				option.setAttribute("value","America");
				models.appendChild(option);
			}
			function changeEvent()
			{
				var objSelect =document.getElementById("model");
				alert( objSelect.options[objSelect.selectedIndex].value);
			}

		</script>
	</head>
	<body>
		<p><input type="button" value="请点击我" onclick="updateModel();"/></p>
		<p>
			<select id="model" onchange="changeEvent();">
				<option>请选择</option>
				<option>示范</option>
			</select>	
		</p>
	</body>
</html>