## 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); }); ```