世界级/全国/省份/城市/县区4级联动

世界级/全国/省份/城市/县区4级联动

Js为腾讯qq的LocList.xml 需要转为json格式的js文件
(在QQ安装目录可以找到loclist.xml文件 C:\ProgramFiles\Tencent\QQIntl\I18N\2052)
XML转json在线地址：http://www.ab173.com/json/xml2json.php

layui Html：

<div class="layui-form-item">
    <label class="layui-form-label"  style="width: 100px;">城市</label>
    <div class="layui-input-inline">
        <select lay-filter="country" id="country" name="increment_country">

        </select>
    </div>
    <div class="layui-input-inline">
        <select lay-filter="province" id="province" name="increment_province">

        </select>
    </div>
    <div class="layui-input-inline">
        <select lay-filter="city" id="city" name="increment_city">

        </select>
    </div>
    <div class="layui-input-inline">
        <select id="area" name="increment_area">

        </select>
    </div>
</div>

jq：

//加载国家
$(function () {
    $.getJSON("/weui/js/loclist.js", function (data){
        console.log(data.Location.CountryRegion)
        data = data.Location.CountryRegion;
        var str = '';
        str += '<option value="0">选择国家</option>';
        for(var i in data) {
            str += '<option value="'+data[i]['-Code']+'">'+data[i]['-Name']+'</option>';
        };
        $('#country').html(str);
        form.render();
    })
})

//省份
form.on('select(country)', function(datas){
       var country = datas.value;

        $.getJSON("/weui/js/loclist.js", function (data){
            data = data.Location.CountryRegion;
            var str = '<option value="0">选择省份</option>';
            for(var i in data) {
                if (data[i]['-Code'] == country)
                {
                    var sub = data[i]['State'];
                    for(var k in sub) {
                        str += '<option value="'+sub[k]['-Code']+'">'+sub[k]['-Name']+'</option>';
                    };
                }
            };
            $('#province').html(str);
            form.render();
        })

})

//城市
form.on('select(province)', function(datas){
    var province = datas.value;

    $.getJSON("/weui/js/loclist.js", function (data){
        data = data.Location.CountryRegion;
        var str = '<option value="0">选择城市</option>';
        for(var i in data) {
            var State = data[i]['State'];
            for(var k in State) {
                if (State[k]['-Code'] == province)
                {
                    var sub = State[k]['City'];
                    for(var l in sub) {
                        str += '<option value="'+sub[l]['-Code']+'">'+sub[l]['-Name']+'</option>';
                    };
                }
            };
        };
        $('#city').html(str);
        form.render();
    })

})

//区
form.on('select(city)', function(datas){
    var province = $('#province').val();
    var city = datas.value;

    $.getJSON("/weui/js/loclist.js", function (data){
        data = data.Location.CountryRegion;
        var str = '<option value="0">选择县/区</option>';
        for(var i in data) {
            var State = data[i]['State'];
            for(var k in State) {
                if (State[k]['-Code'] == province) {
                    var City = State[k]['City'];
                    for (var c in City) {
                        if (City[c]['-Code'] == city) {
                            var sub = City[c]['Region'];
                            for (var l in sub) {
                                str += '<option value="' + sub[l]['-Code'] + '">' + sub[l]['-Name'] + '</option>';
                            }
                            ;
                        }
                    }
                    ;
                };
            };
        };
        $('#area').html(str);
        form.render();
    })

})