省级城市三级联动最新版

引用的js为WEUI+ 的city.data.js

js地址:https://gitee.com/yoby/weui.git
文件地址:/js/city.data.js

layui Html:

<div class="layui-form-item">
    <label class="layui-form-label" style="width: 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();
    })

})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值