Home > Article > Web Front-end > The option overlay problem of select in layui

The option overlay problem of select in layui

小云云Original: 2018-03-12 09:21:322041browse

When using layui, I encountered a pitfall in the select area. The value in the select could not be cleared. The options in the select had a superposition problem. In order to solve this problem and achieve my function, I did some research and let some Friends who have the same needs don’t step into the trap, so here’s 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:&#39;时间规则11&#39;,amount:1100,money:1100},
 {unitType:0,ruleName:&#39;时间规则12&#39;,amount:1200,money:1200},
 {unitType:0,ruleName:&#39;时间规则13&#39;,amount:1300,money:1300},
 {unitType:1,ruleName:&#39;金额规则21&#39;,amount:2100,money:2100},
 {unitType:1,ruleName:&#39;金额规则22&#39;,amount:2200,money:2200},
 {unitType:1,ruleName:&#39;金额规则23&#39;,amount:2300,money:2300},
];
//初始化默认为时间类型以及对应的时间规则
layui.use(&#39;form&#39;, function(){
 var form = layui.form;
  $(&#39;#test2&#39;).html(&#39;&#39;);
  var html=&#39;&#39;;
  $.each(data,function(i,e){
   if(e.unitType==0)
    html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
  })
  $(&#39;#test2&#39;).append(html);
  form.render(&#39;select&#39;); 
})
//动态二级联动
layui.use(&#39;form&#39;, function(){
 var form = layui.form;
  form.on(&#39;select(test1)&#39;, function(obj){
  $(&#39;#test2&#39;).html(&#39;&#39;);
  var html=&#39;&#39;;
  if(obj.value==0){
   $.each(data,function(i,e){
    if(e.unitType==obj.value)
     html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
   })
   $(&#39;#test2&#39;).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>`;
   })
   $(&#39;#test2&#39;).append(html);
  }
  form.render(&#39;select&#39;);
 });
})
//二级联动完毕后获取对应的规则数据
$(&#39;#btn&#39;).click(function(){
 var thisValue=data.find((v)=>v.ruleName==$(&#39;#test2&#39;).val());
 console.log(thisValue); 
})
</script>
</html>

Related recommendations:

Recommended courses on boundary overlay

Using margin boundary overlay problems and solutions in CSS

Use nested select sub-formulas to solve the problem that mysql cannot be superimposed using max(sum())

The above is the detailed content of The option overlay problem of select in layui. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS code generation QR code example sharingNext article：JS code generation QR code example sharing

See more

The option overlay problem of select in layui

Related articles