通过amaze UI实现省市区三级联动

    最近开发一个网站需要用户填写省市区地址，现在大部分网站都是通过选择框实现三级联动的方式来实现的。

    因为系统使用了amaze UI，而amaze UI有一个开源的Chosen组件刚好能满足要求。<br/>
git地址amaze UI Chose。

先看下效果：

演示地址：
省市区三级联动Demo

1.引用样式

<link rel="stylesheet" href="path/to/amazeui.min.css"/>
<link rel="stylesheet" href="path/to/amazeui.chosen.css"/>

2.引用javascript

<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.chosen.min.js"></script>

Amaze UI 是一个轻量级、 Mobile first 的前端框架，所以是支持移动端的。但是chosen对移动端做了限制，如果要使用在移动端，需要amazeui.chosen.js做下修改,注释browser_is_supported方法中移动端限制逻辑代码，如下所示：

AbstractChosen.browser_is_supported = function() {
    if (window.navigator.appName === "Microsoft Internet Explorer") {
    return document.documentMode >= 8;
  }
  //if (/iP(od|hone)/i.test(window.navigator.userAgent)) {
  //  return false;
  //}
  //if (/Android/i.test(window.navigator.userAgent)) {
  //  if (/Mobile/i.test(window.navigator.userAgent)) {
  //    return false;
  //  }
  //}
  return true;
};

3.html页面引入省市区选择列表

<select data-placeholder="请选择省" class="province" tabindex="7">
    <option value=""></option>        
</select>
<select data-placeholder="请选择市" class="city" tabindex="7">
    <option value=""></option>
</select>
<select data-placeholder="请选择区/县" class="area" tabindex="7">
    <option value=""></option>
</select>

4.javascript逻辑代码

//列出全国所有省市区，这里没有列出所有区域，下面提供下载地址，需要的可以去下载
var areaMore = [{ "Province": "北京", "City": ["北京市"], "_Area": [["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县"]] }, { "Province": "天津", "City": ["天津市"], "_Area": [["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "蓟县", "宁河县", "静海县"]] }, { "Province": "上海", "City": ["上海市"], "_Area": [["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区"]] }, { "Province": "重庆", "City": ["重庆市"], "_Area": [["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "垫江县", "武隆县", "丰都县", "城口县", "梁平县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县", "酉阳土家族苗族自治县", "秀山土家族苗族自治县"]] }, { "Province": "河北省", "City": ["石家庄市", "张家口市", "承德市", "秦皇岛市", "唐山市", "廊坊市", "保定市", "衡水市", "沧州市", "邢台市", "邯郸市"], "_Area": [["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "正定县", "栾城县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县", "平山县", "元氏县", "赵县"], ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "康保县", "沽源县", "尚义县", "蔚县", "阳原县", "怀安县", "万全县", "怀来县", "涿鹿县", "赤城县", "崇礼县"], ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "平泉县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县"], ["海港区", "山海关区", "北戴河区", "昌黎县", "抚宁县", "卢龙县", "青龙满族自治县"], ["路北区", "路南区", "古冶区", "开平区", "丰润区", "丰南区", "遵化市", "迁安市", "滦县", "滦南县", "乐亭县", "迁西县", "玉田县", "唐海县"], ["安次区", "广阳区", "霸州市", "三河市", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县"], ["新市区", "北市区", "南市区", "定州市", "涿州市", "安国市", "高碑店市", "满城县", "清苑县", "易县", "徐水县", "涞源县", "定兴县", "顺平县", "唐县", "望都县", "涞水县", "高阳县", "安新县", "雄县", "容城县", "曲阳县", "阜平县", "博野县", "蠡县"], ["桃城区", "冀州市", "深州市", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景县", "阜城县"], ["运河区", "新华区", "泊头市", "任丘市", "黄骅市", "河间市", "沧县", "沧州市新华区", "青县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献县", "孟村回族自治县"], ["桥东区", "桥西区", "南宫市", "沙河市", "邢台县", "临城县", "内丘县", "柏乡县", "隆尧县", "任县", "南和县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县", "威县", "清河县", "临西县"], ["丛台区", "邯山区", "复兴区", "峰峰矿区", "武安市", "邯郸县", "临漳县", "成安县", "大名县", "涉县", "磁县", "肥乡县", "永年县", "邱县", "鸡泽县", "广平县", "馆陶县", "魏县", "曲周县"]] }, { "Province": "山西省", "City": ["太原市", "朔州市", "大同市", "阳泉市", "长治市", "晋城市", "忻州市", "晋中市", "临汾市", "吕梁市", "运城市"], "_Area": [["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县", "阳曲县", "娄烦县"], ["朔城区", "平鲁区", "山阴县", "应县", "右玉县", "怀仁县"], ["城区", "矿区", "南郊区", "新荣区", "阳高县", "广灵县", "灵丘县", "浑源县", "左云县", "大同县"], ["城区", "矿区", "郊区", "平定县", "盂县"], ["城区", "郊区", "潞城市", "长治县", "襄垣县", "屯留县", "平顺县", "黎城县", "壶关县", "长子县", "武乡县", "沁县", "沁源县"], ["城区", "高平市", "泽州县", "沁水县", "阳城县", "陵川县"], ["忻府区", "原平市", "定襄县", "五台县", "代县", "繁峙县", "宁武县", "静乐县", "神池县", "五寨县", "岢岚县", "河曲县", "保德县", "偏关县"], ["榆次区", "介休市", "榆社县", "左权县", "和顺县", "昔阳县", "寿阳县", "太谷县", "祁县", "平遥县", "灵石县"], ["尧都区", "侯马市", "霍州市", "曲沃县", "翼城县", "襄汾县", "洪洞县", "古县", "安泽县", "浮山县", "吉县", "乡宁县", "蒲县", "大宁县", "永和县", "隰县", "汾西县"], ["离石区", "孝义市", "汾阳市", "文水县", "中阳县", "兴县", "临县", "方山县", "柳林县", "岚县", "交口县", "交城县", "石楼县"], ["盐湖区", "永济市", "河津市", "芮城县", "临猗县", "万荣县", "新绛县", "稷山县", "闻喜县", "夏县", "绛县", "平陆县", "垣曲县"]] }, { "Province": "内蒙古自治区", "City": ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "呼伦贝尔市", "鄂尔多斯市", "乌兰察布市", "巴彦淖尔市", "兴安盟", "锡林郭勒盟", "阿拉善盟"], "_Area": [["回民区", "新城区", "玉泉区", "赛罕区", "托克托县", "武川县", "和林格尔县", "清水河县", "土默特左旗"], ["昆都仑区", "东河区", "青山区", "石拐区", "白云鄂博矿区", "九原区", "固阳县", "土默特右旗", "达尔罕茂明安联合旗"], ["海勃湾区", "海南区", "乌达区"], ["红山区", "元宝山区", "松山区", "宁城县", "林西县", "阿鲁科尔沁旗", "巴林左旗", "巴林右旗", "克什克腾旗", "翁牛特旗", "喀喇沁旗", "敖汉旗"], ["科尔沁区", "霍林郭勒市", "开鲁县", "库伦旗", "奈曼旗", "扎鲁特旗", "科尔沁左翼中旗", "科尔沁左翼后旗"], ["海拉尔区", "满洲里市", "扎兰屯市", "牙克石市", "根河市", "额尔古纳市", "阿荣旗", "新巴尔虎右旗", "新巴尔虎左旗", "陈巴尔虎旗", "鄂伦春自治旗", "鄂温克族自治旗", "莫力达瓦达斡尔族自治旗"], ["东胜区", "达拉特旗", "准格尔旗", "鄂托克前旗", "鄂托克旗", "杭锦旗", "乌审旗", "伊金霍洛旗"], ["集宁区", "丰镇市", "卓资县", "化德县", "商都县", "兴和县", "凉城县", "察哈尔右翼前旗", "察哈尔右翼中旗", "察哈尔右翼后旗", "四子王旗"], ["临河区", "五原县", "磴口县", "乌拉特前旗", "乌拉特中旗", "乌拉特后旗", "杭锦后旗"], ["乌兰浩特市", "阿尔山市", "突泉县", "科尔沁右翼前旗", "科尔沁右翼中旗", "扎赉特旗"], ["锡林浩特市", "二连浩特市", "多伦县", "阿巴嘎旗", "苏尼特左旗", "苏尼特右旗", "东乌珠穆沁旗", "西乌珠穆沁旗", "太仆寺旗", "镶黄旗", "正镶白旗", "正蓝旗"], ["阿拉善右旗", "额济纳旗", "阿拉善左旗"]] }];

(function ($) {
    'use strict';

    $(function () {

        //加载省选项

        var provinceContent = "";
        for (var i = 0; i < areaMore.length; i++) {
            provinceContent += "<option value='" + areaMore[i].Province + "' >" + areaMore[i].Province + "</option>";
        }

        $('.province').append(provinceContent);

         //调用省选择列表chosen,并设置其change事件，可动态根据省修改市选择列表

        $('.province').chosen().change(function () {
            //加载市选项
            var province = $('.province').val();
            for (var i = 0; i < areaMore.length; i++) {
                if (areaMore[i].Province === province) {
                    var cityContent = "<option value=''></option>";
                    for (var j = 0; j < areaMore[i].City.length; j++) {
                        cityContent += "<option value='" + areaMore[i].City[j] + "' >" + areaMore[i].City[j] + "</option>";
                    }
                    $('.city').html(cityContent).trigger('chosen:updated');;
                    return;
                }
            }

        });

         // 调用市选择列表chosen,并设置其change事件，可动态根据市修改区县选择列表

        $('.city').chosen().change(function () {
            var province = $('.province').val();
            for (var i = 0; i < areaMore.length; i++) {
                if (areaMore[i].Province === province) {
                    var city = $('.city').val();
                    for (var j = 0; j < areaMore[i].City.length; j++) {
                        if (areaMore[i].City[j] === city) {
                            var areaContent = "<option value=''></option>";
                            for (var k = 0; k < areaMore[i]._Area[j].length; k++) {
                                areaContent += "<option value='" + areaMore[i]._Area[j][k] + "' >" + areaMore[i]._Area[j][k] + "</option>";
                            }
                            $('.area').html(areaContent).trigger('chosen:updated');;
                            return;
                        }
                    }             
                }
            }               
        });
        //调用区县选择列表chose
        $('.area').chosen();
    }); //end 
})(jQuery);

5.代码下载地址

git地址:git clone https://github.com/xuhang2015/region.git