小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑,特贴上我的源码:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>layui-下拉框联动测试</title>

     <link rel="stylesheet" href="layui/css/layui.css">

 </head>

 <body>

 <div id="wrap">

  <div class="layui-form" lay-filter="merchantForm">

   <div class="layui-form-item">

     <label class="layui-form-label">选择框</label>

     <div class="layui-input-block">

       <select name="city" lay-verify="required" id="test1"  lay-filter="test1">

         <option value="0">时间</option>

         <option value="1">金额</option>

       </select>

     </div>

   </div>

   <div class="layui-form-item">

     <label class="layui-form-label">选择框</label>

     <div class="layui-input-block">

       <select name="city" lay-verify="required" id="test2"  lay-filter="test2">

         <option value="">请选择规则名称</option>

       </select>

     </div>

   </div>

 </div>    

 <button id="btn">确定</button>

 </body>

 <script src="layui/layui.all.js"></script>

 <script src="layui/jquery-1.8.3.min.js"></script>

 <script>

 //后台传过来的数据

 var data=[

  {unitType:0,ruleName:'时间规则11',amount:1100,money:1100},

  {unitType:0,ruleName:'时间规则12',amount:1200,money:1200},

  {unitType:0,ruleName:'时间规则13',amount:1300,money:1300},

  {unitType:1,ruleName:'金额规则21',amount:2100,money:2100},

  {unitType:1,ruleName:'金额规则22',amount:2200,money:2200},

  {unitType:1,ruleName:'金额规则23',amount:2300,money:2300},

 ];

 //初始化默认为时间类型以及对应的时间规则

 layui.use('form', function(){

   var form = layui.form;

         $('#test2').html('');

         var html='';

         $.each(data,function(i,e){

             if(e.unitType==0)

              html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;

         })

         $('#test2').append(html);

         form.render('select');

 })

 //动态二级联动

 layui.use('form', function(){

   var form = layui.form;

       form.on('select(test1)', function(obj){

         $('#test2').html('');

         var html='';

         if(obj.value==0){

             $.each(data,function(i,e){

                 if(e.unitType==obj.value)

                  html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;

             })

             $('#test2').append(html);

         }else if(obj.value==1){

             $.each(data,function(i,e){

                 if(e.unitType==obj.value)

                 html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;

             })

             $('#test2').append(html);

         }

         form.render('select');

     });

 })

 //二级联动完毕后获取对应的规则数据

 $('#btn').click(function(){

     var thisValue=data.find((v)=>v.ruleName==$('#test2').val());

     console.log(thisValue);

 })

 </script>

 </html>

一定不要设置value值一样,不然相同的value都给你加上lay-this

有疑问的小伙伴可以留言给我，谢谢。

layui之select的option叠加问题解决的更多相关文章

  1. layui 触发 select 下option 被选择事件

    1.找到值为某一个的元素 var S0 = 'dd[lay-value='+ level+']'; 2.给该元素注册点击事件  siblings(兄弟节点) $('select[name=\'leve ...

  2. layui的select联动 - CSDN博客

    要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载的内容,需要重新渲染后才可以 正常使用. html结构: <form class="layui- ...

  3. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  4. HTML 表单和输入<textarea><label><fieldset><legend><select><optgroup><option><button>

    textarea><label><fieldset><legend><select><optgroup><option>& ...

  5. 有关attribute和property，以及各自对select中option的影响

    这个问题老生常谈,但是直到现在我依旧时常会把它搞混.下面列一些各自的特性.   attribute property 设置方法 option.setAttribute('selected', true ...

  6. JS实现选择不同select标签option值的验证

    js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...

  7. jquery动态刷新select的值，后台传过来List<T>，前台解析后填充到select的option中

    jquery动态刷新select的值:将后台传来的List<T>赋值到select下的option. 第一个select选择后出发该方法refreshMerchant(params),传递 ...

  8. js 操作select和option

    js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...

  9. select的option异常的总结

    来源:http://www.ido321.com/1189.html 昨天,在项目中碰到了option显示异常的原因,截图如下: Firefox中用css控制之后效果 chrome和IE中css不奏效 ...

随机推荐

  1. IE浏览器兼容问题

    文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入 ...

  2. css3中的BFC,IFC,GFC和FFC

    出处:https://www.jianshu.com/p/e75f351e11f8 表格比较: 名称 英文全称 含义 BFC Block Formatting Contexts 块级格式化上下文 IF ...

  3. Jmeter使用自定义编写代码

    原文地址:http://blog.csdn.net/li_ok/article/details/1487685 我们在做性能测试时,有时需要自己编写测试脚本,很多测试工具都支持自定义编写测试脚本,比如 ...

  4. Zookeeper 基本概念学习

    1.Zookeeper简介: 1) 中间件,为分布式系统提供协调服务 2) 作用于分布式系统,发挥其优势,可以为大数据服务 3) 支持Java,提供java和c语言的客户端api 2. 分布式系统 1 ...

  5. pyhanlp 共性分析与短语提取内容详解

    pyhanlp 共性分析与短语提取内容详解   简介 HanLP中的词语提取是基于互信息与信息熵.想要计算互信息与信息熵有限要做的是 文本分词进行共性分析.在作者的原文中,有几个问题,为了便于说明,这 ...

  6. excel技巧--一键求和

    类似于上图的表格,我们要得到右侧和下侧栏的汇总结果,通常可以用sum公式加下拉方式,但是还有一种方法更快速,那就是使用 ALT + “+=”组合键就能一下子得到所有汇总结果.(+=键,就是一个键,该键 ...

  7. Team Foundation Server 2010简体中文版

    文件名称:Team Foundation Server 2010简体中文版 文件大小:1.8 GBhttp://www.google.com/profiles/dedecms.com 下载地址: th ...

  8. Linux学习 LVM ***

    一.前言 LVM,逻辑卷管理工具,它的作用是提供一种灵活的磁盘管理办法.通常我们的某个分区用完了,想要扩容,很麻烦.但是用lvm就可以很方便的扩容,收缩. 看它的原理图: 它的原理大致是:首先将磁盘做 ...

  9. @@identity与scope_identity()函数的区别

    @@IDENTITY 和SCOPE_IDENTITY 返回在当前会话中的任何表内所生成的最后一个标识值. SCOPE_IDENTITY 只返回插入到当前作用域中的值: @@IDENTITY 不受限于特 ...

  10. 黄聪：3分钟学会sessionStorage用法

    前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...