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();
        })
    
    })
    
  • 相关阅读:
    java TreeSet的排序之定制排序
    java TreeSet的排序之自然排序
    java TreeSet
    java Set接口(元素不可以重复)
    poj 3735 Training little cats(构造矩阵)
    进程创建/退出父子关系的调整
    安装R语言的包的方法
    项目搭建之路(上)
    为什么百度首页的HTML源代码最后一行要多一行?浪费空间呀!
    机器学习之梯度下降法
  • 原文地址:https://www.cnblogs.com/niuzilong/p/13762488.html
Copyright © 2011-2022 走看看