집 > 기사 > 웹 프론트엔드 > Layui에서 선택의 옵션 오버레이 문제에 대한 솔루션

Layui에서 선택의 옵션 오버레이 문제에 대한 솔루션

亚连원래의: 2018-05-31 16:34:342377검색

이제 Layui에서 Select의 옵션 오버레이 문제에 대한 해결책을 공유하겠습니다. 참고할만한 가치가 높으며 모든 분들께 도움이 되기를 바랍니다.

layui를 사용 중인데 선택 영역에서 오류가 발생했습니다. 선택 항목의 옵션에 중첩 문제가 있습니다. 이 문제를 해결하고 기능을 달성하기 위해 몇 가지 조사를 했습니다. 같은 요구 사항을 가진 친구들이 함정에 빠지지 않도록 하세요. 여기 제 소스 코드가 있습니다:

<!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>

위 내용은 제가 여러분을 위해 편집한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.

Layui에서 선택의 옵션 오버레이 문제에 대한 솔루션

관련 기사