js实现省市区三级联动

最新推荐文章于 2024-04-01 09:49:29 发布

yueloveme

最新推荐文章于 2024-04-01 09:49:29 发布

阅读量571

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/yueloveme/article/details/77885969

版权

JAVA 专栏收录该内容

110 篇文章 0 订阅

订阅专栏

给大家推荐个靠谱的公众号程序员探索之路，大家一起加油

当省改变时--------市自动变为该省的市-------区变为第一个市的区

当市改变时--------区变为该省该市的区

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'Address.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="js/address.js"></script>
<script type="text/javascript">
		var jsonArr = getProArr();
		//当html解析完毕后开始执行这个方法    初始化默认的省  市   区状态
		window.onload= function(){
			//获取三个下拉列表的对象
			var pro = document.getElementById("provice");
			var city = document.getElementById("city");
			var area = document.getElementById("area");
			//html1用来显示默认省
			var html1="";
			//显示默认的省
			for(var i = 0;i < jsonArr.length;i++){
				html1 += "<option value='"+jsonArr[i].id+"'>" + jsonArr[i].name+ "</option>";
			}
			//网页中显示
			pro.innerHTML = html1;
		
			//显示默认的市
			var html2="";
			for(var i = 0;i < jsonArr[0].list.length;i++){
				html2 += "<option value='"+jsonArr[0].list[i].id+"'>"+ jsonArr[0].list[i].name + "</option>";
			}
			city.innerHTML=html2;
		
			//显示默认的区
			var html3="";
			for(var i = 0;i < jsonArr[0].list[0].list.length;i++){
				html3 +="<option value='"+ jsonArr[0].list[0].list[i].id+"'>"+ jsonArr[0].list[0].list[i].name+"</option>";
			}
			area.innerHTML=html3;
		}
		//用来省市改变时  是第几个省市
		var proi=0;
		//当省改变时   自动改变该省的市
		function changePro(){
			var proValue = document.getElementById("provice").value;
			var html2="";
			var html3="";
			
			for(var i = 0;i < jsonArr.length;i++){
				//如果json数组中的id和此时省的下拉列表中的id相同
				if(jsonArr[i].id == proValue){
					//保存改变之后的省   下标
					proi=i;
					//html2保存改变之后的省 的市   第一个默认是数组中的第一个
					for(var j = 0;j < jsonArr[i].list.length;j++){
						html2 += "<option value='"+jsonArr[i].list[j].id+"'>"+ jsonArr[i].list[j].name + "</option>";
					}
					//html3保存改变之后的省的市  的默认的区  第一个是默认的第一个市中的默认的第一个区
					for(var j = 0;j < jsonArr[i].list[0].list.length;j++){
						html3 +="<option value='"+ jsonArr[i].list[0].list[j].id+"'>"+ jsonArr[i].list[0].list[j].name+"</option>";
					}
				}
				
				
			}
			city.innerHTML=html2;
			area.innerHTML=html3;
		}
		
		//当市改变时  区自动变为该市的区
		function changeCity(){
			var cityValue = document.getElementById("city").value;
			var html3="";
			//proi是保存的改变之后的省  
			for(var i = 0;i < jsonArr[proi].list.length;i++){
				if(jsonArr[proi].list[i].id==cityValue){
					for(var j = 0;j < jsonArr[proi].list[i].list.length;j++){
						html3 +="<option value='"+ jsonArr[proi].list[i].list[j].id+"'>"+ jsonArr[proi].list[i].list[j].name+"</option>";
					}
				}
			}
			area.innerHTML=html3;
		}
	</script>

</head>
<body>
	选择省：<select id="provice" onchange="changePro()"></select>
	选择市：<select id="city" onchange="changeCity()"></select>
	选择区：<select id="area"></select>
</body>
</html

yueloveme

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现省市区三级联动

给大家推荐个靠谱的公众号程序员探索之路，大家一起加油当省改变时--------市自动变为该省的市-------区变为第一个市的区当市改变时--------区变为该省该市的区 &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;% String path = requ...
复制链接

扫一扫