您的位置：首页 > 其它

web三级联动选择地址

2018-04-03 22:36 357 查看

地址三级联动，依赖城市city.js文件<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>

<script type="text/javascript" src="js/city.js"></script>然后再script中初始化列表<script type="text/javascript">
//三级联动
//设置省份初始化
$(function(){

var html="";
$.each(city.citylist,function(index,item){
html+="<option value='"+item.p+"'>"+item.p+"</option>";
})

$("select[name='province']").html(html);

//
html="";
$.each(city.citylist,function(index,item){
if(item.p=="北京"){
$.each(item.c,function(index,c){
html+="<option value='"+c.n+"'>"+c.n+"</option>";
})
}
});
$("select[name='prefecture']").html(html);

//省份改变时候，市区做相应的改变
$("select[name='province']").change(function(){
var p=$("select[name='province']").val();
//设置清空乡镇残余文字。
$("select[name='county']").html("");

html="";
$.each(city.citylist,function(index,item){
if(item.p==p){
$.each(item.c,function(index,c){
html+="<option value='"+c.n+"'>"+c.n+"</option>";
})
}
});

$("select[name='prefecture']").html(html);
});

$("select[name='prefecture']").change(function(){
var p=$("select[name='province']").val();
var c=$("select[name='prefecture']").val();

html="";
$.each(city.citylist,function(index,item){

if(p==item.p){

$.each(item.c,function(index,city){

if(c==city.n){

$.each(city.a,function(index,a){

html+="<option value='"+a.s+"'>"+a.s+"</option>";

})
}
});
}
});
$("select[name='county']").html(html);
})
});
</script>在body中显示标签 <div>
<label>城市：</label>
<div>
<select name="province" id="province"></select>
</div>
</div>
<div>
<div>
<select name="prefecture" id="prefecture"></select>
</div>
</div>
<div>
<div>
<select name="county" id="county"></select>
</div>
</div>整个页面为：<%@ page language="java" contentType="text/html; charset=utf-8"
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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="<%=basePath%>">
<title>用户注册</title>
<script type="text/javascript" src="jquery/jquery-2.2.4.min.js"></script>

<script type="text/javascript" src="js/city.js"></script>
<script type="text/javascript">
//三级联动
//设置省份初始化
$(function(){

var html="";
$.each(city.citylist,function(index,item){
html+="<option value='"+item.p+"'>"+item.p+"</option>";
})

$("select[name='province']").html(html);

//
html="";
$.each(city.citylist,function(index,item){
if(item.p=="北京"){
$.each(item.c,function(index,c){
html+="<option value='"+c.n+"'>"+c.n+"</option>";
})
}
});
$("select[name='prefecture']").html(html);

//省份改变时候，市区做相应的改变
$("select[name='province']").change(function(){
var p=$("select[name='province']").val();
//设置清空乡镇残余文字。
$("select[name='county']").html("");

html="";
$.each(city.citylist,function(index,item){
if(item.p==p){
$.each(item.c,function(index,c){
html+="<option value='"+c.n+"'>"+c.n+"</option>";
})
}
});

$("select[name='prefecture']").html(html);
});

$("select[name='prefecture']").change(function(){
var p=$("select[name='province']").val();
var c=$("select[name='prefecture']").val();

html="";
$.each(city.citylist,function(index,item){

if(p==item.p){

$.each(item.c,function(index,city){

if(c==city.n){

$.each(city.a,function(index,a){

html+="<option value='"+a.s+"'>"+a.s+"</option>";

})
}
});
}
});
$("select[name='county']").html(html);
})
});
</script>
</head>
<body>
<div>
<label>城市：</label>
<div>
<select name="province" id="province"></select>
</div>
</div>
<div>
<div>
<select name="prefecture" id="prefecture"></select>
</div>
</div>
<div>
<div>
<select name="county" id="county"></select>
</div>
</div>

</body>
</html>

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

标签： 三级联动 web地址三级联动

相关文章推荐

新的分享

章节导航