原生JS实现多级联动

最新推荐文章于 2024-12-16 14:41:49 发布

一只风小风

最新推荐文章于 2024-12-16 14:41:49 发布

阅读量1.2k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_46563201/article/details/123225450

版权

关于select下拉框的操作，参考：https://www.imooc.com/article/10487

多级联动：有三个下拉框，在你选择第一个下拉框后自动根据第一个的内容去生成第二个下拉框的内容，第三个下拉框的内容同样如此，注意是自动的，意思是：在选择第一个下拉框的时候第二个和第三个框的值是同时改变的

针对第一个下拉框一般的做法是在页面加载时就将内容进行初始化填充进去

用原生JS实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="Province" id="Province">
			<option>--选择省--</option>
		</select>
		
		<select name="city" id="city">
			<option>--选择市--</option>
		</select>
		
		<select name="Area" id="Area">
			<option>--选择区--</option>
		</select>
		
		
	</body>
	
	<script type="text/javascript">
		//当页面加载时就将省的数据添加到选择省的下拉框中
		window.onload = function(){
     
			debugger
			//省的数据
			var ProvinceArray = ["湖北省","河北省","江苏省"," 浙江省","四川省"];
			for(let i = 0; i < ProvinceArray.length; i++)
			{
     
				//第一个属性代表标签内的内容，第二个代表value值
				let opt = new Option(ProvinceArray[i]

最低0.47元/天解锁文章