javascript 实现简单的二级联动

最新推荐文章于 2023-05-27 21:26:14 发布

唐小白成长记

最新推荐文章于 2023-05-27 21:26:14 发布

阅读量124

点赞数

分类专栏： javascript 文章标签：二级联动 javascript

本文链接：https://blog.csdn.net/tangyue1997/article/details/91889221

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

话不多说上代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select name="" id="" onchange="func(this)">
		<option value="">--请选择--</option>
		<option value="0">北京</option>
		<option value="1">河北</option>
		<option value="2">河南</option>
		<option value="3">广州</option>
	</select>省
	<select name="" id="cid">
		<option value="">--请选择--</option>
	</select>市
</body>
<script>
//获取市的id
var cid = document.getElementById('cid');

console.log(cid);
	function func(obj)
	{	
		//获取省份的value 值
		var sid = obj.value;

		//根据省份value  声明一个市
		var city = [];
			city[0] = ['朝阳区','昌平区','大兴区','密云区'];
			city[1] = ['石家庄','唐山','张家口'];
			city[2] = ['郑州','洛阳','开封'];
			city[3] = ['白云区','越秀区','花都区'];
		
		//固定长度 也就是清空原来内容
		cid.length = 1;

		for(i=0;i<city[sid].length;i++)
		{	
			op  = new Option(city[sid][i],i); //声明一个option
			cid.add(op); //添加
		}
	}
</script>
</html>

唐小白成长记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 实现简单的二级联动

话不多说上代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <select name="" id="" onchange="fun...
复制链接

扫一扫