基於layui如何實現無限極聯選擇器（附程式碼）

這篇文章帶給大家的內容是關於基於layui如何實現無限極聯選擇器（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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',
        }
    ]
    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參數說明

1、elem：input容器
2、data：所需的靜態數據，類型為數組，
3、url：非同步獲取的數據，類型為數組，（data與url兩個參數二選一）
4、type：異步獲取的方式，預設get，可省略
5、where：非同步傳入的參數，可省略
6、triggerType：觸發方式，不填或其他都為click，可選參數"change"，即滑鼠移入觸發
7、showLastLevels ：輸入框是否只顯示最後一級,預設false，即全顯示
8、value：傳入的初始值，類型為數組，值為data的value值
9、success：回呼函數，選擇完成之後的回呼函數，傳回值為value數組

線上demo
github原始碼

##相關推薦：

layui的專案最佳化以及無侵入最佳化的詳細解析

#layui form表單的動態渲染與vue.js之間的衝突解決方法（附程式碼）

#

以上是基於layui如何實現無限極聯選擇器（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！