约定

• 省市区三级城市联动效果，选择框默认全部显示，选择后根据实际情况显示或隐藏。

• 在省得select上加上属性 load-data=“330102” 即表示页面需把330102这个对应的相关select做相应选中。

• json数据结构：城市编码6位（每2位表示一级），城市层级，上一级编码，城市名称，其他根据业务实际需求而定
  效果https://github.com/Pamki/blog...

DOM结构：

<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><input class="show" type="text" name="address" id="address" />(class改加hide即可隐藏)

js：

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>

博客地址：http://blog.csdn.net/pamki/ar...