layui+json二级联动

最新推荐文章于 2021-02-03 10:33:14 发布

木大大

最新推荐文章于 2021-02-03 10:33:14 发布

阅读量1.9k

点赞数 1

分类专栏：省市二级联动文章标签： layui 二级联动省市

本文链接：https://blog.csdn.net/qq_37843397/article/details/80654119

版权

layui:

<div class="layui-form-item">
    <label class="layui-form-label">
         <span class="x-red">*</span>城市
    </label>
    <div class="layui-input-inline">
         <select name="province" lay-filter="province" class="province">
               <option value="">请选择省</option>
         </select>
    </div>
    <div class="layui-input-inline">
         <select name="city" lay-filter="city">
                <option value="">请选择市</option>
         </select>
    </div>
</div>

 layui.use([ 'layer', 'jquery', 'form'], function() {


        $ = layui.jquery;
        var form = layui.form
                ,layer = layui.layer;

        $.get("city.json", function (data) {
            var proHtml = '';
            for (var i = 0; i < data.length; i++) {
                proHtml += '<option value="' + data[i].province + '">' + data[i].province + '</option>';
            }
            //初始化省数据
            $("select[name=province]").append(proHtml);
            form.render();
        })


        form.on('select(province)', function(data){
            $("select[name=city]").empty();
            form.render();
            $.get("city.json", function (msg) {
                var cityHtml = '';
                cityHtml += '<option value="">请选择市</option>';
                for (var i = 0; i < msg.length; i++) {
                    if(msg[i].province==data.value){
                        for (var j = 0; j < msg[i].city.length; j++) {
                            cityHtml += '<option value="' + msg[i].city[j].city_name + '">' + msg[i].city[j].city_name + '</option>';
                        }
                        break;
                    }
                }
                //初始化省数据
                $("select[name=city]").append(cityHtml);
                form.render();
            })
        });


    });

city.json:

[
{
"province": "北京",
"city": [
{
"city_name": "北京",
"number": "101010100"
},
{
"city_name": "朝阳",
"number": "101010300"
},
{
"city_name": "顺义",
"number": "101010400"
},
{
"city_name": "怀柔",
"number": "101010500"
},
{
"city_name": "通州",
"number": "101010600"
},
{
"city_name": "昌平",
"number": "101010700"
},
{
"city_name": "延庆",
"number": "101010800"
},
{
"city_name": "丰台",
"number": "101010900"
},
{
"city_name": "石景山",
"number": "101011000"
},
{
"city_name": "大兴",
"number": "101011100"
},
{
"city_name": "房山",
"number": "101011200"
},
{
"city_name": "密云",
"number": "101011300"
},
{
"city_name": "门头沟",
"number": "101011400"
},
{
"city_name": "平谷",
"number": "101011500"
},
{
"city_name": "八达岭",
"number": "101011600"
},
{
"city_name": "佛爷顶",
"number": "101011700"
},
{
"city_name": "汤河口",
"number": "101011800"
},
{
"city_name": "密云上甸子",
"number": "101011900"
},
{
"city_name": "斋堂",
"number": "101012000"
},
{
"city_name": "霞云岭",
"number": "101012100"
},
{
"city_name": "北京城区",
"number": "101012200"
},
{
"city_name": "海淀",
"number": "101010200"
}
]
},
{
"province": "天津市",
"city": [
{
"city_name": "天津",
"number": "101030100"
},
{
"city_name": "宝坻",
"number": "101030300"
},
{
"city_name": "东丽",
"number": "101030400"
},
{
"city_name": "西青",
"number": "101030500"
},
{
"city_name": "北辰",
"number": "101030600"
},
{
"city_name": "蓟县",
"number": "101031400"
},
{
"city_name": "汉沽",
"number": "101030800"
},
{
"city_name": "静海",
"number": "101030900"
},
{
"city_name": "津南",
"number": "101031000"
},
{
"city_name": "塘沽",
"number": "101031100"
},
{
"city_name": "大港",
"number": "101031200"
},
{
"city_name": "武清",
"number": "101030200"
},
{
"city_name": "宁河",
"number": "101030700"
}
]
},
{
"province": "上海",
"city": [
{
"city_name": "上海",
"number": "101020100"
},
{
"city_name": "宝山",
"number": "101020300"
},
{
"city_name": "嘉定",
"number": "101020500"
},
{
"city_name": "南汇",
"number": "101020600"
},
{
"city_name": "浦东",
"number": "101021300"
},
{
"city_name": "青浦",
"number": "101020800"
},
{
"city_name": "松江",
"number": "101020900"
},
{
"city_name": "奉贤",
"number": "101021000"
},
{
"city_name": "崇明",
"number": "101021100"
},
{
"city_name": "徐家汇",
"number": "101021200"
},
{
"city_name": "闵行",
"number": "101020200"
},
{
"city_name": "金山",
"number": "101020700"
}
]
},
{
"province": "河北",
"city": [
{
"city_name": "石家庄",
"number": "101090101"
},
{
"city_name": "张家口",
"number": "101090301"
},
{
"city_name": "承德",
"number": "101090402"
},
{
"city_name": "唐山",
"number": "101090501"
},
{
"city_name": "秦皇岛",
"number": "101091101"
},
{
"city_name": "沧州",
"number": "101090701"
},
{
"city_name": "衡水",
"number": "101090801"
},
{
"city_name": "邢台",
"number": "101090901"
},
{
"city_name": "邯郸",
"number": "101091001"
},
{
"city_name": "保定",
"number": "101090201"
},
{
"city_name": "廊坊",
"number": "101090601"
}
]
},
{
"province": "河南",
"city": [
{
"city_name": "郑州",
"number": "101180101"
},
{
"city_name": "新乡",
"number": "101180301"
},
{
"city_name": "许昌",
"number": "101180401"
},
{
"city_name": "平顶山",
"number": "101180501"
},
{
"city_name": "信阳",
"number": "101180601"
},
{
"city_name": "南阳",
"number": "101180701"
},
{
"city_name": "开封",
"number": "101180801"
},
{
"city_name": "洛阳",
"number": "101180901"
},
{
"city_name": "商丘",
"number": "101181001"
},
{
"city_name": "焦作",
"number": "101181101"
},
{
"city_name": "鹤壁",
"number": "101181201"
},
{
"city_name": "濮阳",
"number": "101181301"
},
{
"city_name": "周口",
"number": "101181401"
},
{
"city_name": "漯河",
"number": "101181501"
},
{
"city_name": "驻马店",
"number": "101181601"
},
{
"city_name": "三门峡",
"number": "101181701"
},
{
"city_name": "济源",
"number": "101181801"
},
{
"city_name": "安阳",
"number": "101180201"
}
]
},
{
"province": "安徽",
"city": [
{
"city_name": "合肥",
"number": "101220101"
},
{
"city_name": "芜湖",
"number": "101220301"