LayUI 获取下拉框选择的值

前台渲染下拉框例如:

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

手机扫描二维码访问

本文标题:《LayUI 获取下拉框选择的值》作者:极四维博客
原文链接:https://cway.top/post/562.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

dnbn dnbn 发布于 2019-09-28 11:04:09  
#cmt26
买快递单号,上单号购买网 www.danhw.com 回复
发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«    2024年10月    »
123456
78910111213
14151617181920
21222324252627
28293031

搜索

控制面板

您好,欢迎到访网站!
  查看权限

最新留言

文章归档

  • 订阅本站的 RSS 2.0 新闻聚合