Layui二級聯動-詳解

一、概述

Layui是一款基於jQuery開發的UI框架，它提供了便捷的介面、豐富的組件和模板，開發者可以輕鬆地構建出美觀、易用的Web界面。Layui提供了許多組件，其中之一就是二級聯動。

二級聯動是指一個下拉框的值的選取需要依賴於另外一個下拉框的值。比如一個省份下拉框和一個城市下拉框，當選擇一個省份時，城市下拉框會根據選擇的省份動態更新可選的城市列表。Layui提供了非常方便的二級聯動組件，我們只需要提供數據源和一些配置參數，就可以輕鬆實現二級聯動功能。

二、數據源格式

Layui二級聯動組件的數據源是一個Javascript對象（JSON）數組。每個元素表示一個選項，它至少包含兩個屬性：value和name。value是選項的值，name是選項的名稱。在二級聯動中，每個選項還可以包含一個children屬性，它是一個數組，表示該選項的子選項。children數組的每一個元素也必須包含value和name屬性，但是不需要children屬性，因為子選項的子選項可以通過遍曆數據源來獲取。

三、配置參數

Layui二級聯動組件提供了一些配置參數，可以影響聯動的行為。以下是一些比較常用的參數：

1、elem：指定聯動的父元素的id。父元素通常是一個div或者fieldset元素，包含了兩個下拉框。

2、url：指定數據源的url。如果不指定url，則需要在js中定義一個data數組作為數據源。

3、value：指定下拉框默認選中的值。如果不指定value，則選中第一個選項。

4、disabled：指定下拉框是否禁用。如果設置為true，則下拉框不可用。

5、change：指定下拉框的選中項發生變化時的回調函數。回調函數的第一個參數是被選中的選項的value值。

四、示例代碼

以下是一個簡單的示例，展示了如何使用Layui二級聯動組件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui二級聯動示例</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <select id="province"></select>
            </div>
            <div class="layui-input-inline">
                <select id="city"></select>
            </div>
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
        //定義數據源
        var data = [
            {
                "value": "110000",
                "name": "北京市",
                "children": [
                    {
                        "value": "110100",
                        "name": "市轄區"
                    },
                    {
                        "value": "110200",
                        "name": "縣"
                    }
                ]
            },
            {
                "value": "120000",
                "name": "天津市",
                "children": [
                    {
                        "value": "120100",
                        "name": "市轄區"
                    },
                    {
                        "value": "120200",
                        "name": "縣"
                    }
                ]
            }
        ];

        //示例代碼
        layui.use('form', function(){
            var form = layui.form;
            var province = $('#province');
            var city = $('#city');

            //填充省份下拉框
            $.each(data, function(){
                province.append('<option value="' + this.value + '">' + this.name + '</option>');
            });

            //綁定省份下拉框的change事件
            province.on('change', function(){
                var value = $(this).val();

                //根據選中的省份來填充城市下拉框，同時清空舊選項
                city.empty();
                $.each(data, function(){
                    if(this.value === value && this.children){
                        $.each(this.children, function(){
                            city.append('<option value="' + this.value + '">' + this.name + '</option>');
                        });
                        form.render('select');
                    }
                });
            });

            //trigger省份下拉框的change事件，觸發初始化
            province.trigger('change');
        });
    </script>
</body>
</html>

以上代碼演示了如何創建兩個下拉框，並且實現二級聯動。該例子中省份和城市的數據都是在js中定義的，二級聯動的實現方法是在province的change事件中遍曆數據源，並判斷當前選中的省份是否有子選項，如果有，則將子選項填充到城市下拉框中。

五、總結

Layui提供了非常方便的二級聯動組件，可以幫助開發者輕鬆實現省市聯動等需求。在使用Layui二級聯動組件時，我們需要提供一個符合規範的數據源，並且設置一些必要的配置參數，就可以輕鬆實現二級聯動功能。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/252069.html