您的位置：首页 > Web前端 > JavaScript

js实现省市区三级联动

2017-09-07 20:03 537 查看

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

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

<%@ 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航