前台渲染下拉框例如:
$("select[name='sex']").empty(); var optionD = '<option value = ""> 请选择...</option>'; optionD += '<option value = "1"> 男 </option>'; optionD += '<option value = "0"> 女 </option>'; $("select[name='sex']").append(optionD); layui.form.render("select");
HTML 内容(以下是渲染后的内容)
<div class="layui-inline"> <label class="layui-form-label"> 性别:</label> <div class="layui-input-inline"> <select name="sex" lay-filter="sex" class="selectop"> <option value=""> 请选择... </option> <option value="0"> 男 </option> <option value="1"> 女 </option> </select> <div class="layui-unselect layui-form-select layui-form-selected"> <div class="layui-select-title"> <input type="text" placeholder=" 请选择..." value="" readonly="readonly" class="layui-input layui-unselect" /><i class="layui-edge"></i> </div> <dl class="layui-anim layui-anim-upbit" style=""> <dd lay-value="" class="layui-select-tips layui-this" style=""> 请选择...</dd> <dd lay-value="0" class=""> 男 </dd> <dd lay-value="1" class=""> 女 </dd> </dl> </div> </div> </div>
获取下拉框所选值
sex = $("select[name='sex'] option:selected").val(),// 获取下拉框值
也可以使用 form 监控获取值
// 获取 select 下拉框的值 form.on('select(sex)', function (data) { sex= data.value; params.sex = sex; })
封装查询的实体
function getSearchParam() { var params = {}; var matkl = $("input[name='name']").val(), labor = $("select[name='sex'] option:selected").val();// 获取下拉框值 if (name) { params.name = name; } if (sex) { params.sex = sex; } return params; }
好处:第一种简单,需要在下拉框点击查询的时候才获取下拉框值;第二种用 form.on 监控 select 组件,只要选择值变动即能获取下拉框值。
#cmt26