小編我在使用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
有疑問的小伙伴可以留言給我，謝謝。