zoukankan      html  css  js  c++  java
  • 省级三级联动最新版

    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();
        })
    
    })
    
  • 相关阅读:
    前后端分离方式渲染数据(2018/11/12)
    vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)
    css 布局,过渡
    java.lang.InstantiationException: com.lch.commder.entity.Car 已解决
    [Err] 1146
    js简单图片切换
    HTML5布局篇
    IntelliJ IDEA(快捷键)
    hibernate检索策略
    hibernate(一对多关系)
  • 原文地址:https://www.cnblogs.com/niuzilong/p/13762488.html
Copyright © 2011-2022 走看看