小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑,特贴上我的源码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>layui前端框架select联动</title> 6 <link rel="stylesheet" href="./layui/css/layui.css"> 7 </head> 8 <body> 9 <div id="wrap"> 10 <div class="layui-form"> 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="">请选择账号类型</option> 16 <option value="0">时间</option> 17 <option value="1">金额</option> 18 </select> 19 </div> 20 </div> 21 <div class="layui-form-item"> 22 <label class="layui-form-label">选择框</label> 23 <div class="layui-input-block"> 24 <select name="city" lay-verify="required" id="test2" lay-filter="test2"> 25 <option value="">请选择规则名称</option> 26 </select> 27 </div> 28 </div> 29 </div> 30 </body> 31 <script src="./layui/layui.js"></script> 32 <script src="./layui/layer/layer.js"></script> 33 <script src="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 layui.use(‘form‘, function(){ 45 var form = layui.form; 46 form.on(‘select(test1)‘, function(obj){ 47 if(obj.value==‘‘){ 48 return false; 49 }else if(obj.value==0){ 50 layui.use(‘form‘, function(){ 51 var form = layui.form; 52 $.each(data,function(i,e){ 53 var html=‘‘; 54 if(e.unitType==0){ 55 html+=`<option value="${e.unitType}" class="one">${e.ruleName}</option>`; 56 } 57 $(‘#test2‘).find(‘option.two‘).remove(); 58 $(‘#test2‘).append(html); 59 }) 60 form.render(‘select‘); 61 layui.use(‘form‘, function(){ 62 var form = layui.form; 63 form.on(‘select(test2)‘, function(obj){ 64 $(‘#test2 option‘).eq($(‘.one‘).size()+1).nextAll().remove(); 65 }) 66 }) 67 }) 68 }else{ 69 layui.use(‘form‘, function(){ 70 var form = layui.form; 71 $.each(data,function(i,e){ 72 var html=‘‘; 73 if(e.unitType==1){ 74 html+=`<option value="${e.unitType}" class="two">${e.ruleName}</option>`; 75 } 76 $(‘#test2‘).find(‘option.one‘).remove(); 77 $(‘#test2‘).append(html); 78 }) 79 form.render(‘select‘); 80 layui.use(‘form‘, function(){ 81 var form = layui.form; 82 form.on(‘select(test2)‘, function(obj){ 83 $(‘#test2 option‘).eq($(‘.two‘).size()+1).nextAll().remove(); 84 }) 85 }) 86 }) 87 } 88 }) 89 }); 90 </script> 91 </html>
有疑问的小伙伴可以留言给我，谢谢。