Home > Article > Web Front-end > How to deal with select option overlay

How to deal with select option overlay

php中世界最好的语言Original: 2018-03-17 09:50:411536browse

This time I will show you how to deal with the option overlay of select and solve the option overlay of selectWhat are the precautions?The following is a practical case, let's take a look.

I was using layui and encountered a pitfall in the select area. The value in the select could not be cleared. There was also a superposition problem with the options in the select. In order to solve this problem and achieve my function, I did some research. Next, so that friends who have the same needs will not step into the trap, I will post my source code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>layui-下拉框联动测试</title>
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<p id="wrap">
 <p class="layui-form" lay-filter="merchantForm">
 <p class="layui-form-item">
 <label class="layui-form-label">选择框</label>
 <p class="layui-input-block">
  <select name="city" lay-verify="required" id="test1" lay-filter="test1">
  <option value="0">时间</option>
  <option value="1">金额</option>
  </select>
 </p>
 </p>
 <p class="layui-form-item">
 <label class="layui-form-label">选择框</label>
 <p class="layui-input-block">
  <select name="city" lay-verify="required" id="test2" lay-filter="test2">
  <option value="">请选择规则名称</option>
  </select>
 </p>
 </p>
</p> 
<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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to deal with select option overlay

Related articles