How to implement Infinity Selector based on layui (with code)

The content of this article is about how to implement the Infinity Selector (with code) based on layui. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

html element

<div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
        <input type="text" id="a" class="layui-input" readonly="readonly">
    </div>
</div>

js reference

layui.use(['form',"jquery","cascader"], function(){
    var $ = layui.jquery;
    var cascader = layui.cascader;
    
    var data = [
        {
            value: 'A',
            label: 'a',
            children: [
                {
                    value: 'AA1',
                    label: 'aa1',
                },
                {
                    value: 'BB1',
                    label: 'bb1'
                }
            ]
        },
        {
            value: 'B',
            label: 'b',
        }
    ]
    cascader({
        elem: "#a",
        data: data,
        // url: "/aa",
        // type: "post",
        // triggerType: "change",
        // showLastLevels: true,
        // where: {
        //     a: "aaa"
        // },
        value: ["A", "AA1"],
        success: function (data) {
            console.log(data);
        }
    });
});

cascader parameter description

1. elem: input container
2. data: required static data , type is array,
3. url: data obtained asynchronously, type is array, (choose one of the two parameters data and url)
4. type: asynchronous acquisition method, default get, can be omitted
5. where: asynchronously passed in parameters, can be omitted
6. triggerType: trigger mode, leave it blank or all others are click, optional parameter "change", which is triggered when the mouse moves in
7, showLastLevels : Whether the input box only displays the last level, the default is false, that is, all display
8, value: the initial value passed in, the type is an array, the value is the value of data
9, success: callback function, select The callback function after completion returns the value array

Online demo
github source code

Related recommendations ：

Detailed analysis of layui’s project optimization and non-intrusive optimization

Conflict resolution between dynamic rendering of layui form and vue.js ( Code attached)

The above is the detailed content of How to implement Infinity Selector based on layui (with code). For more information, please follow other related articles on the PHP Chinese website!