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 回复
发表评论:

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

«    2025年1月    »
12345
6789101112
13141516171819
20212223242526
2728293031

搜索

控制面板

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

最新留言

文章归档

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