선택 옵션 오버레이 문제

이번에는 셀렉트 옵션 오버레이 문제를 가져오겠습니다. 셀렉트 옵션 오버레이 문제를 해결하기 위한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다. 에디터님은 Layui를 사용하고 있는데 선택 영역에서 오류가 발생했습니다. 선택 영역의 값이 지워지지 않고, 이 문제를 해결하고 기능을 구현하기 위해 선택 영역의 옵션이 중첩되는 문제가 있습니다. , 동일한 요구 사항을 가진 친구들이 함정에 빠지지 않도록 몇 가지 조사를 수행했습니다.

nbsp;html>


 <meta>
 <title>layui-下拉框联动测试</title>
 <link>


<p>
 </p><p>
 </p><p>
 <label>选择框</label>
 </p><p>
  <select>
  <option>时间</option>
  <option>金额</option>
  </select>
 </p>
 
 <p>
 <label>选择框</label>
 </p><p>
  <select>
  <option>请选择规则名称</option>
  </select>
 </p>
 
 
<button>确定</button>

<script></script>
<script></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}`;
  })
  $(&#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}`;
   })
   $(&#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}`;
   })
   $(&#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>

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

추천 자료:

vue에서 xe-utils를 사용하는 방법

vue-router가 빌드될 때 라우팅 페이지가 표시되지 않는 문제를 해결하는 방법

위 내용은 선택 옵션 오버레이 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!