<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jq/jquery-1.8.3.js"></script>
</head>
<body>
<select id="province" onchange="provinceSelect(this)"></select>
<select id="city" onchange="citySelect(this)"></select>
<select id="region"></select>
</body>
<script type="text/javascript">
var list=new Array(2);
list["湖北省"]=["武汉市","襄樊市"];
list["湖南省"]=["长沙市","浏阳市"];
list["湖北省"]["武汉市"]=["洪山区","江夏区","武昌区","汉口区"];
list["湖北省"]["襄樊市"]=["樊城区","襄城区"];
list["湖南省"]["长沙市"]=["岳阳区","阳岳区"];
list["湖南省"]["浏阳市"]=["浏阳区","阳浏区"];
//给省份添加下拉列表添加省份值
$(function(){
var option = "<option value='请选择省份'>请选择省份</option>";
//添加下拉
$("#province").append(option);
//遍历数组将省份添加到下拉框
for(var op in list){
var option = "<option value='"+op+"'>"+op+"</option>";
$("#province").append(option);
}
});
//将省份的城市添加到下拉框
function provinceSelect(province){
$("#city").empty();//清空
$("#city").append("<option value='请选择城市'>请选择城市</option>");
var provinces = $(province).val();
for(var i=0;i < list[provinces].length;i++){
$("#city").append("<option value='"+list[provinces][i]+"'>"+list[provinces][i]+"</option>");
}
}
function citySelect(city){
$("#region").empty();
$("#region").append("<option value='请选择区域'>请选择区域</option>");
var citys = $(city).val();
var provinces = $("#province").val();
for(var i=0;i < list[provinces][citys].length;i++){
$("#region").append("<option value='"+list[provinces][citys][i]+"'>"+list[provinces][citys][i]+"</option>");
}
}
</script>
</html>
jQuery选择器实现地址的三级联动
猜你喜欢
转载自blog.csdn.net/Shi_Yuan_Csdn/article/details/82117579
今日推荐
周排行