LayUI获取下拉框选择的值

😂 这篇文章最后更新于1645天前,您需要注意相关的内容是否还可用。

前台渲染下拉框例如:

$("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组件,只要选择值变动即能获取下拉框值。