html元素

<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引用

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',
        }
    ]
    var cas=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);
        }
    });

    cas.reload({})  // 重載
});

cascader參數(shù)說明

1. elem：input容器
2. data：需要的靜態(tài)數(shù)據(jù)，類型為數(shù)組，
3. url：異步獲取的數(shù)據(jù)，類型為數(shù)組，（data與url兩個參數(shù)二選一）
4. type：異步獲取的方式，默認get，可省略
5. where：異步傳入的參數(shù)，可省略
6. triggerType：觸發(fā)方式，不填或其他都為click，可選參數(shù)"change"，即鼠標移入觸發(fā)
7. showLastLevels：輸入框是否只顯示最后一級,默認false，即全顯示
8. value：傳入的初始值，類型為數(shù)組，值為data的value值
9. success：回調(diào)函數(shù)，選擇完成之后的回調(diào)函數(shù)，返回值為value數(shù)組

cascader函數(shù)

1. cas.reload(): 可重新渲染數(shù)據(jù)

在線demo
github源碼