## 19-二次開發：增加細分菜單、權限到應用 需求說明： 做一個下拉框，下拉框中的數據來源于接口，并增加事件完成篩選功能；  ### 1-添加div ``` <div class="layui-form toolbar"> 搜索：<input id="menus-edit-search" class="layui-input search-input" type="text" placeholder="輸入關鍵字"/>&emsp; <button id="menus-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button> <button id="menus-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&emsp; 選擇應用： <div class="layui-inline"> <select name="clientId" id="menus-select-clientId" lay-filter="clientId"> <option value="">請選擇</option> </select> </div> </div> ``` 注意：`lay-filter="clientId"`必須要有，否則監聽事件不生效。 ### 2-初始化toolbar-應用選擇下拉框 ``` //初始化toolbar-應用選擇下拉框 admin.req('api-auth/clients/all', {}, function (data) { layer.closeAll('loading'); // 渲染單選下拉框 $.each(data, function (index, item) { $('#menus-select-clientId').append(new Option(item.clientId, item.clientId));//往下拉菜單里添加元素 }) form.render(); //渲染 把內容加載進去 }, 'GET'); ``` ### 3-重新渲染頁面 使用layui.form事件，監聽select切換。 ``` form.on('select(clientId)', function (data) { console.log(data.value); renderTable(data.value); }); ```