省级三级联动最新版

js为WEUI+ 的city.data.js
layui Html:

    <label class="layui-form-label" style=" 100px;">城市</label>
    <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 lay-filter="area" id="area" name="increment_area">

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

JQ

$(function () {
    $.getJSON("/weui/js/city.data.js", function (data){
        var str = '';
        str += '<option value="0">选择省份</option>';
        for(var i in data) {
            str += '<option value="'+data[i].name+'">'+data[i].name+'</option>';
        };
        $('#province').html(str);
        form.render();
    })
})

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

    $.getJSON("/weui/js/city.data.js", function (data){
        var str = '';
        for(var i in data) {
            if (data[i].name == province)
            {
                var sub = data[i].sub;
                // console.log(sub);
                for(var k in sub) {
                    str += '<option value="'+sub[k].name+'">'+sub[k].name+'</option>';
                };
            }
        };
        $('#city').html(str);
        form.render();
    })

})

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

    $.getJSON("/weui/js/city.data.js", function (data){
        var str = '';
        for(var i in data) {
            if (data[i].name == province)
            {
                var sub = data[i].sub;
                // console.log(sub);
                for(var k in sub) {
                    if (sub[k].name == city)
                    {
                        var subs = sub[k].sub;
                        for(var c in subs) {
                            str += '<option value="'+subs[c].name+'">'+subs[c].name+'</option>';
                        };
                    };
                };
            };
        };
        $('#area').html(str);
        form.render();
    })

})
原文地址:https://www.cnblogs.com/niuzilong/p/13762488.html