master

分支 (1)

管理

管理

master

layui-nb_selectN
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>高德地图区划四级联动power by www.nbnat.com</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>

<body style='padding:10px'>
    <form class="layui-form" method="post">

        <div class="layui-form-item">
            <label class="layui-form-label">高德区划</label>
            <div id="cat_ids1">
            </div>
        </div>

        </div>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    //使用API前您需先申请Key，若无高德地图API账号需要先申请账号。
    //https://lbs.amap.com/?ref=http%3A%2F%2Flbs.amap.com%2Fdev%2Fkey
    layui.extend({'nb_selectN': 'ext/nb_selectN'});
    layui.use(['nb_selectN', 'form', 'layer'], function () {
        var $ = layui.$
            , nb_selectN = layui.nb_selectN
            , form = layui.form
            , layer = layui.layer;
        //无限级分类-所有配置
        var catIns2 = nb_selectN({
            //元素容器【必填】
            elem: '#cat_ids1'
            //候选数据【必填】
            , data: 'https://restapi.amap.com/v3/config/district?key=你的KEY&keywords=100000&subdistrict=3&extensions=base'
            //此处新增预处理数据格式
            , parseData: function (res) {
                let _res = res.districts[0].districts;
                return _res;
            }
            //设置了长度
            , width: null
            //默认值
            , selected: []
            //为真只取最后一个值
            , last: true
            //空值项提示，可设置为数组['请选择省','请选择市','请选择县']
            , tips: ['请选择省', '请选择市', '请选择县']
            //事件过滤器，lay-filter名 不设置与选择器相同(去#.)
            , filter: ''
            //input的name 不设置与选择器相同(去#.)
            , name: 'cat2'
            //数据分隔符
            , delimiter: ','
            //数据的键名
            , field: {idName: 'adcode', titleName: 'name', childName: 'districts'}
            //表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
            , formFilter: null

        });
        /**
         * 新增选择后数据
         * dataIndex [] 当前数据的index索引,方便取原始数据
         * selected [{name: "text", value: "value"}] 选中项
         */
        catIns2.on('change', function (e) {
            //处理高德地图第四级数据
            if (3 == e.selected.length) {
                //第四级高德地址
                let _url = 'https://restapi.amap.com/v3/config/district?key=你的KEY&subdistrict=1&extensions=base&keywords=' + e.selected[2].value;
                let _data;
                //取缓存
                districts_4 = layui.data('districts');
                _data = districts_4[e.selected[2].value];
                //无缓存时重新请求
                if (typeof _data != 'object') {
                    $.ajaxSettings.async = false;
                    $.get(_url, function (res) {
                        _data = res.districts[0].districts
                        layui.data('districts', {key: e.selected[2].value, value: _data})
                    })
                    $.ajaxSettings.async = true;
                }
                //暴力追加第四级数据到原始数组
                catIns2.config.data[e.dataIndex[0]].districts[e.dataIndex[1]].districts[e.dataIndex[2]].districts = _data;
                //设置选中项
                catIns2.set([e.selected[0].value, e.selected[1].value, e.selected[2].value]);
            }
        })
    });
</script>
</html>