layui的地市二級聯(lián)動菜單，官網(wǎng)僅有示例代碼，僅備存。需要時查閱。

下拉菜單html代碼：

<form class="layui-form">
    <label class="layui-form-label">聯(lián)動選擇框</label>
    <div class="layui-input-inline">
      <select name="quiz1" lay-filter="quiz1"></select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2" lay-filter="quiz2"></select>
    </div>
</form>

JavaScript實(shí)現(xiàn)代碼：

layui.use(['form'], function () {
        // layui引入需要的組件
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
 
        // 二級聯(lián)動 
        // 第一步 渲染父級
        $.ajax({
            url: '/getProvince',	// 后臺取到所有的省份名稱
            dataType: 'json',
            type: 'get',
            success: function (resData) {
                $('#quiz1').empty();
                $.each(resData.data, function (index, value) {
                    // 這里的 value.name
                    // 前者是頁面顯示的值，后者是傳遞給后臺的值。
                    // 正常情況下，后者應(yīng)該是 value.id
                    $('#quiz1').append(new Option(value.name, value.name));	// 下拉菜單里添加元素
                });
 
                //渲染select
                form.render('select');
            }
        });
        // 第二步 監(jiān)聽父級，每當(dāng)父級發(fā)生變化時，渲染子級的值
        form.on('select(quiz1)', function(data){
            var provinceName = data.value; // roomName 選中的省份名稱
            
            $.ajax({
                url: '/getCity',
                dataType: 'json',
                type: 'post',
                data: {
                    provinceName: provinceName
                },		// 傳入科室名稱，查找該科室的所有床號
                success: function (resData) {
                    // 清空床號
                    $('#quiz2').empty();
                    $.each(resData.data, function (index, value) {
                        // 這里的 value.cityname
                        // 前者是頁面顯示的值，后者是傳遞給后臺的值。
                        // 正常情況下，后者應(yīng)該是 value.id
                        $('#quiz2').append(new Option(value.cityname, value.cityname));// 下拉菜單里添加元素
                    });
 
                    //渲染select
                    form.render('select');
                }
            });
        });
 
    });

效果圖：

掃描二維碼手機(jī)查看該文章