二级联动小案例

最新推荐文章于 2024-07-25 14:02:05 发布

ymj960722

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量89

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/ymj960722/article/details/107424243

版权

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>二级联动</title>
</head>
<body>
	<select id="city">
		<option value="bj">北京</option>
		<option value="tj">天津</option>
		<option value="sh">上海</option>
	</select>

	<select id="area">
		<option value="hd">海淀</option>
		<option value="cy">朝阳</option>
		<option value="dc">东城</option>
	</select>
</body>
<script type="text/javascript">
	var selectCity = document.getElementById("city");
	var selectArea = document.getElementById("area");
	selectCity.οnchange=function(){
		var optionVal = selectCity.value;
		if(optionVal=="bj"){
			selectArea.innerHTML = "<option value='hd'>海淀</option><option value='cy'>朝阳</option><option value='dc'>东城</option>";
		}
		else if(optionVal=="tj"){
			selectArea.innerHTML = "<option value='hk'>南开</option><option value='hx'>河西</option><option value='hd'>河东</option>";
		}
		else{
			selectArea.innerHTML = "<option value='pd'>浦东</option><option value='yp'>杨浦</option><option value='px'>浦西</option>";
		}
	};
</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ymj960722

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级联动小案例

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>二级联动</title></head><body> <select id="city"> <option value="bj">北京</option> <option value="tj">天津&lt.
复制链接

扫一扫