最近在写个人网站的时候，个人信息完善界面，有个填写地址的需求，当然不能让人家自己输入，所以就需要提供选择，用HTML+jQuery写了个城市三级联动
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 导入jQuery -->
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div style="text-align: center;margin-top: 20%;">
<!-- 省选择器 -->
<select id="province">
</select>
<!-- 市选择器 -->
<select id="city">
</select>
<!-- 区县选择器 -->
<select id="area">
</select>
<button id="confirmBtn">确定</button>
</div>
<script>
/**
* 测试数据
*/
var provinces = new Array("安徽省","浙江省");
var citys = [["合肥市","芜湖市","马鞍山","黄山市"],["杭州市","温州","台州"]]
var areas = [[["包河区","瑶海区","蜀山区"],["镜湖区","弋江区"],["花山区","雨山区","当涂县"],["屯溪区","黄山区"]],
[["上城区","下城区","西湖区","临安"],["鹿城区","瓯海区","龙湾区"],["仙居","三门","天台"]]]
//填充省列表
for(var i=0;i<provinces.length;i++){
$("#province").append("<option value='"+i+"'>"+provinces[i]+"</option>")
}
//填充市列表
for(var i=0;i<citys[$("#province option:selected").val()].length;i++){
$("#city").append("<option value='"+i+"'>"+citys[$("#province option:selected").val()][i]+"</option>")
}
//填充区列表
for(var i=0;i<areas[$("#province option:selected").val()][$("#city option:selected").val()].length;i++){
$("#area").append("<option value='"+i+"'>"+areas[$("#province option:selected").val()][$("#city option:selected").val()][i]+"</option>")
}
//省份选项被改动时
$("#province").change(function(){
$("#city").empty();//清空市列表
//填充市列表
for(var i=0;i<citys[$("#province option:selected").val()].length;i++){
$("#city").append("<option value='"+i+"'>"+citys[$("#province option:selected").val()][i]+"</option>")
}
$("#area").empty();
//填充区列表
for(var i=0;i<areas[$("#province option:selected").val()][$("#city option:selected").val()].length;i++){
$("#area").append("<option value='"+i+"'>"+areas[$("#province option:selected").val()][$("#city option:selected").val()][i]+"</option>")
}
})
//市选项被改动时
$("#city").change(function(){
$("#area").empty();
for(var i=0;i<areas[$("#province option:selected").val()][$("#city option:selected").val()].length;i++){
$("#area").append("<option value='"+i+"'>"+areas[$("#province option:selected").val()][$("#city option:selected").val()][i]+"</option>")
}
})
//获得所选择的地址
$("#confirmBtn").click(function(){
alert($("#province option:selected").text() +"/" + $("#city option:selected").text() +"/"+ $("#area option:selected").text())
})
</script>
</body>
</html>
效果图
城市三级联动.gif
注：
如果是通过接口获取数据，有两个方案，一个是直接加载所有的省/市/区县的资料，像这个demo一样存放好数据，还有一个是在选择之后再加载选择的省所对应的市（选择市加载对应的区县），前一个好处是对接口的请求次数少，后一个好处是接收的数据量小。
如果有问题请不吝指出，谢
网友评论