- 省市区三级城市联动效果，选择框默认全部显示，选择后根据实际情况显示或隐藏。
- 在省得select上加上属性 load-data=“330102” 即表示页面需把330102这个对应的相关select做相应选中。
- json数据结构：城市编码6位（每2位表示一级），城市层级，上一级编码，城市名称，其他根据业务实际需求而定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>城市三级联动</title>
<link rel="stylesheet" href="http://static.dev.egtcp.com/static/lib/zui/1.4.0/css/zui.min.css">
<script src="http://static.dev.egtcp.com/static/lib/jquery/core/1.9.1/jquery.min.js"></script>
<script src="http://static.dev.egtcp.com/static/lib/zui/1.4.0/js/zui.min.js"></script>
</head>
<body>
<h4>城市三级联动-默认全部显示</h4>
<h4>数据读取-selsect加属性-load-data并赋值最后一级城市编号，如load-data="330701"</h4>
<form class="form-horizontal col-xs-6">
<div class="form-group">
<label for="" class="col-sm-3 text-right">地址</label>
<div class="col-sm-3">
<select id="province" class="form-control" load-data="330701">
<option value="">--选择省/市--</option>
</select>
</div>
<div class="col-sm-3">
<select id="city" class="form-control">
<option value="">--选择城市--</option>
</select>
</div>
<div class="col-sm-3">
<select id="dist" class="form-control">
<option value="">--选择区域--</option>
</select>
</div>
<input class="show" type="text" name="address" id="address" />(class改加hide即可隐藏)
</div>
</form>
<script type="text/javascript">
var prov_obj = $("#province");
var city_obj = $("#city");
var district_obj = $("#dist");
var are_obj = $("#address");
var city = document.getElementById('city');
var district = document.getElementById('dist');
var select_prehtml="";
var getcity;
var setCity = function() {
//只要触发了此事件，2、3级菜单必须还原
city.options.length = 1; //重置选项
district.options.length = 1; //重置选项
var val = prov_obj.val();
temp_html=select_prehtml;
var getjson = $.each(getcity, function(i, prov) {
if(prov.level == 2 && prov.parent_code == val) {
temp_html += "<option name=\"" + prov.abbr + "\" value=\"" + prov.code + "\">" + prov.name + "</option>";
}
});
$.when(getjson).done(function(data) {
city_obj.append(temp_html);
getdist("one");
});
}; //设置城市
var setArea = function() {
//只要触发了此事件，3级菜单必须还原
district.options.length = 1; //重置选项
var val = city_obj.val();
temp_html=select_prehtml;
var getjson = $.each(getcity, function(i, prov) {
if(prov.level == 3 && prov.parent_code == val) {
temp_html += "<option name=\"" + prov.abbr + "\" value=\"" + prov.code + "\">" + prov.name + "</option>";
}
});
$.when(getjson).done(function(data) {
district_obj.append(temp_html);
if(district.options.length < 2) {
district_obj.hide();
} else {
district_obj.show();
}
getdist("two");
});
}; //设置区域
var getdist = function(sign) {
var s1 = prov_obj.val();
var s2 = city_obj.val();
var s3 = district_obj.val();
if(sign == "one") {
are_obj.val(s1);
prov_obj.attr("load-data", s1);
} else if(sign == "two") {
are_obj.val(s2);
prov_obj.attr("load-data", s2);
} else {
are_obj.val(s3);
prov_obj.attr("load-data", s3);
}
}; //获取城市编码
var load_city = function() {
if($("select").attr("load-data") != "") {
var ldata = $("select").attr("load-data");
are_obj.val(ldata);
temp_html,temp_html2=select_prehtml;
for(var i = 0; i < getcity.length; i++) {
if(getcity[i].code == ldata && getcity[i].parent_code.substr(2, 4) == "0000") {
var s1 = ldata.substr(0, 2) + "0000"; //1级
prov_obj.val(s1);//获取1级城市目录并赋值
for(var j = 0; j < getcity.length; j++) {
if(getcity[j].level == 2 && getcity[j].parent_code == getcity[i].parent_code) {
temp_html += "<option name=\"" + getcity[j].abbr + "\" value=\"" + getcity[j].code + "\">" + getcity[j].name + "</option>"; //获取2级城市目录
}
}
city_obj.append(temp_html);
city_obj.val(ldata);//获取2级城市目录并赋值
} else if(getcity[i].code == ldata && getcity[i].parent_code.substr(2, 4) !== "0000") {
var s1 = ldata.substr(0, 2) + "0000"; //1级
var s2 = ldata.substr(0, 4) + "00"; //2级
$("#province option[value='" + s1 + "']").attr('selected', true);
for(var j = 0; j < getcity.length; j++) {
if(getcity[j].level == 3 && getcity[j].parent_code == s2) {
temp_html += "<option name=\"" + getcity[j].abbr + "\" value=\"" + getcity[j].code + "\">" + getcity[j].name + "</option>"; //获取3级城市目录
} else if(getcity[j].level == 2 && getcity[j].parent_code == s1) {
temp_html2 += "<option name=\"" + getcity[j].abbr + "\" value=\"" + getcity[j].code + "\">" + getcity[j].name + "</option>"; //获取2级城市目录
}
}
city_obj.append(temp_html2);
city_obj.val(s2);//获取2级城市目录并赋值
district_obj.append(temp_html);
district_obj.val(ldata);//获取3级城市目录并赋值
}
}
}
}
var init = function() {
// 遍历赋值省份下拉列表
temp_html=select_prehtml;
$.each(getcity, function(i, prov) {
if(prov.level == 1) {
temp_html += "<option name=\"" + prov.abbr + "\" value=\"" + prov.code + "\">" + prov.name + "</option>";
}
});
prov_obj.append(temp_html);
prov_obj.bind("change", function() {
setCity();
});
city_obj.bind("change", function() {
setArea();
});
district_obj.bind("change", function() {
getdist();
});
};
//加载json数据
$.getJSON('city.json', function(data) {
getcity = data.area;
init();
load_city();
});
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 省市区三级联动
前端ABC