layui动态下拉框

如果您想在 layui 表格中添加下拉框，可以使用 lay-filter 和 edit 属性。以下是一个示例： HTML 代码： ```html <table id="demo" lay-filter="test"></table> ``` JavaScript 代码： ```javascript layui.use(['table', 'form'], function(){ var table = layui.table; var form = layui.form; //渲染表格 table.render({ elem: '#demo', url: '/demo/table/user/', cols: [[ {field:'id', title:'ID', width:80, sort:true}, {field:'username', title:'用户名', width:120}, {field:'sex', title:'性别', width:80, edit:'text'}, {field:'city', title:'城市', width:100}, {field:'sign', title:'签名', width:150, edit:'text'}, {field:'experience', title:'积分', width:80, sort:true, edit:'text'}, {field:'ip', title:'IP', width:120}, {field:'logins', title:'登入次数', width:100, sort:true}, {field:'joinTime', title:'加入时间', width:120}, {fixed:'right', title:'操作', toolbar:'#barDemo', width:150} ]], page: true }); //监听单元格编辑 table.on('edit(test)', function(obj){ var value = obj.value; //得到修改后的值 var data = obj.data; //得到所在行所有键值 var field = obj.field; //得到字段 //更新到后台 $.ajax({ type: "POST", url: "/demo/table/edit/", data: { id: data.id, field: field, value: value }, success: function(res){ if(res.code === 0){ layer.msg(res.msg); }else{ layer.msg(res.msg, {icon: 5}); } }, error: function(){ layer.msg('网络错误，请稍后重试！', {icon: 5}); } }); }); //监听下拉框 form.on('select', function(data){ var value = data.value; //得到选中的值 var field = data.elem.name; //得到所在字段 //更新到后台 $.ajax({ type: "POST", url: "/demo/table/edit/", data: { id: data.elem.dataset.id, field: field, value: value }, success: function(res){ if(res.code === 0){ layer.msg(res.msg); }else{ layer.msg(res.msg, {icon: 5}); } }, error: function(){ layer.msg('网络错误，请稍后重试！', {icon: 5}); } }); }); //渲染下拉框 table.on('renderTest', function(obj){ var select = '<select name="sex" lay-filter="sex" data-id="' + obj.data.id + '"><option value="男">男</option><option value="女">女</option></select>'; obj.tr.find('td:eq(2)').html(select); form.render('select'); }); //渲染工具栏 table.on('toolbar(test)', function(obj){ if(obj.event === 'add'){ //添加操作 layer.msg('添加操作'); } }); }); ``` 在上面的代码中，我们使用了 `edit` 属性来启用单元格编辑功能，并使用了 `lay-filter` 属性来绑定事件。在 `cols` 中，我们指定了需要添加下拉框的列，并在 `renderTest` 事件中渲染下拉框。在 `form.on('select')` 事件中，我们监听下拉框的变化，并将修改后的值更新到后台。

layui 中的热下拉框是指在下拉框中输入关键字后，会根据关键字自动筛选出匹配的选项，并展示在下拉框中。实现这个功能需要使用 layui 的下拉框组件，同时结合一些 JavaScript 代码来实现动态筛选。以下是一个简单的示例： HTML 代码： ```html <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select id="city" lay-filter="city"> <option value="">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> <option value="hangzhou">杭州</option> <option value="chengdu">成都</option> <option value="wuhan">武汉</option> </select> </div> </div> ``` JavaScript 代码： ```javascript layui.use(['form', 'jquery'], function() { var form = layui.form; var $ = layui.jquery; // 给下拉框绑定 input 事件，实现热下拉框功能 $('#city').next().find('input').on('input', function() { var keyword = $(this).val(); $('#city option').each(function() { if ($(this).text().indexOf(keyword) === -1) { $(this).hide(); } else { $(this).show(); } }); form.render('select'); }); }); ``` 在上述代码中，我们给下拉框绑定了 input 事件，当用户输入关键字时，遍历所有选项，如果选项的文本中不包含关键字，则隐藏该选项，否则显示该选项。最后调用 form.render('select') 方法重新渲染下拉框即可。