小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑,特贴上我的源码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>layui-下拉框联动测试</title> 6 <link rel="stylesheet" href="layui/css/layui.css"> 7 </head> 8 <body> 9 <div id="wrap"> 10 <div class="layui-form" lay-filter="merchantForm"> 11 <div class="layui-form-item"> 12 <label class="layui-form-label">选择框</label> 13 <div class="layui-input-block"> 14 <select name="city" lay-verify="required" id="test1" lay-filter="test1"> 15 <option value="0">时间</option> 16 <option value="1">金额</option> 17 </select> 18 </div> 19 </div> 20 <div class="layui-form-item"> 21 <label class="layui-form-label">选择框</label> 22 <div class="layui-input-block"> 23 <select name="city" lay-verify="required" id="test2" lay-filter="test2"> 24 <option value="">请选择规则名称</option> 25 </select> 26 </div> 27 </div> 28 </div> 29 30 <button id="btn">确定</button> 31 </body> 32 <script src="layui/layui.all.js"></script> 33 <script src="layui/jquery-1.8.3.min.js"></script> 34 <script> 35 //后台传过来的数据 36 var data=[ 37 {unitType:0,ruleName:'时间规则11',amount:1100,money:1100}, 38 {unitType:0,ruleName:'时间规则12',amount:1200,money:1200}, 39 {unitType:0,ruleName:'时间规则13',amount:1300,money:1300}, 40 {unitType:1,ruleName:'金额规则21',amount:2100,money:2100}, 41 {unitType:1,ruleName:'金额规则22',amount:2200,money:2200}, 42 {unitType:1,ruleName:'金额规则23',amount:2300,money:2300}, 43 ]; 44 //初始化默认为时间类型以及对应的时间规则 45 layui.use('form', function(){ 46 var form = layui.form; 47 $('#test2').html(''); 48 var html=''; 49 $.each(data,function(i,e){ 50 if(e.unitType==0) 51 html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`; 52 }) 53 $('#test2').append(html); 54 form.render('select'); 55 }) 56 //动态二级联动 57 layui.use('form', function(){ 58 var form = layui.form; 59 form.on('select(test1)', function(obj){ 60 $('#test2').html(''); 61 var html=''; 62 if(obj.value==0){ 63 $.each(data,function(i,e){ 64 if(e.unitType==obj.value) 65 html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`; 66 }) 67 $('#test2').append(html); 68 }else if(obj.value==1){ 69 $.each(data,function(i,e){ 70 if(e.unitType==obj.value) 71 html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`; 72 }) 73 $('#test2').append(html); 74 } 75 form.render('select'); 76 }); 77 }) 78 //二级联动完毕后获取对应的规则数据 79 $('#btn').click(function(){ 80 var thisValue=data.find((v)=>v.ruleName==$('#test2').val()); 81 console.log(thisValue); 82 }) 83 </script> 84 </html>
一定不要设置value值一样,不然相同的value都给你加上lay-this
有疑问的小伙伴可以留言给我，谢谢。