1、使用场景：
layui弹框组件中，有一个form表单，其中的下拉框需要根据后台的接口动态的显示，在调完接口的成功回调中，需要获取下拉框的内容。
2.Layui下拉框之select动态数据Ajax
下拉框代码：
<div class="layui-form"> <label class="layui-form-label">学校</label> <div class="layui-input-block"> <select name="SchoolId" lay-verify="required" lay-filter="SchoolId" id="companyId" lay-search> <option value="">请选择学校</option> </select> </div> </div>
ajax逻辑代码：
layui.use(['element', 'form'], function () { var element = layui.element, form = layui.form; $(function () { $.ajax({ async: false, type: "POST", url: ctxPath + 'school/selectAll', success: function (result) { if (result.code == 0) { var list = result.data; var s = '<option value="">请选择学校</option>'; $.each(list, function (i, xx) { console.log(xx.name); s = s + '<option value="' + xx.id + '">' + xx.name + '</option>'; }); $("#xxId").html(s); form.render('select'); } } }); }); });
3.获取下拉框内容
form.on('select(SchoolId)', function(data){ console.log(111100); sex= data.value; //获取value值 text= data.elem[data.elem.selectedIndex].text;; //获取显示的值 console.log("获取value值",sex,"获取显示的值",text); console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 });
4.注意事项
在使用时需要注意：select标签的外层需要加上类名".layui-form"。不然无法生效
