TIP：作者這裡以二級聯動為例

HTML程式碼

tip:程式碼是PHP動態渲染的

 <div class="layui-form-item">
                        <label for="trade" class="layui-form-label">
                            <span class="x-red">*</span>選擇部門
                        </label>
                        <div class="layui-input-inline">
                            <select name="admin_class_id" id="admin_class_id" lay-verify="required" lay-filter="admin_class_id">
                                <option value="0" >請選擇服務部門</option>
                                {volist name='ac_list' id='vo'}
                                {eq name="$vo.id" value="$ac_id"}
                                <option value="{$vo.id}" selected>{$vo.class_name}</option>
                                {else/}
                                <option value="{$vo.id}">{$vo.class_name}</option>
                                {/eq}
                                {/volist} 
                            </select>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label for="trade" class="layui-form-label">
                            <span class="x-red">*</span>選擇人員
                        </label>
                        <div class="layui-input-inline">
                            <select name="admin_user_id" id="admin_user_id" lay-verify="required" >
                                <option value="0" >請選擇服務人員</option>
                                {volist name='au_list' id='vo'}
                                <option value="{$vo.id}">{$vo.name}</option>
                                {/volist} 
                            </select>
                        </div>
                    </div>
 

JS程式碼：

              //監聽select選擇
                form.on('select(admin_class_id)', function(data){ 
                //發非同步
                $.get("/index/service_staff/read/ac_id/"+data.value,function(data,status){
                    console.log("資料: " + data.length + "\n狀態: " + status);
                    console.log(data);
                    //清空下拉框
                    $("#admin_user_id").empty();  
                    $("#admin_user_id").prepend("<option value='0'>--請選擇服務人員--</option>");

                        for(var i = 0; i < data.length; i++)
                        {  
                            $("#admin_user_id").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                        }
                        console.log("重新整理select選擇框渲染");
                        form.render('select'); //重新整理select選擇框渲染
                });
              
                console.log("get呼叫完畢");
                });  
 

 延伸閱讀: