前台渲染下拉框例如:
- $("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