집 > 기사 > 웹 프론트엔드 > 선택 옵션 오버레이를 처리하는 방법

선택 옵션 오버레이를 처리하는 방법

php中世界最好的语言원래의: 2018-03-17 09:50:411472검색

이번에는 선택 옵션 오버레이 처리 방법과 선택 옵션 오버레이를 해결하기 위한 주의사항이 무엇인지 알려드리겠습니다. 다음은 실제 사례인데, 함께 살펴보겠습니다.

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:'时间规则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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!