So lösen Sie das Optionsüberlagerungsproblem von lselect-js-Tutorial-php.cn

So lösen Sie das Optionsüberlagerungsproblem von lselect

php中世界最好的语言

Freigeben： 2018-03-29 09:33:02

Original

1837 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie das Optionsüberlagerungsproblem von lselect lösen können. Was sind die Vorsichtsmaßnahmen, um das Optionsüberlagerungsproblem von lselect zu lösen?

Der Editor, ich verwende Laui, und ich bin auf eine Falle im Auswahlbereich gestoßen. Der Wert in der Auswahl kann nicht gelöscht werden, und die Optionen in der Auswahl weisen ein Überlagerungsproblem auf und um meine Funktion zu erreichen, habe ich nach einiger Recherche meinen Quellcode gepostet, damit Freunde mit den gleichen Bedürfnissen nicht in die Falle tappen:

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

Nach dem Login kopieren

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Der Fall in diesem Artikel finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!

Empfohlene Lektüre:

Wie man damit umgeht, dass die Seite nicht gerendert wird, wenn Vue die folgende Tabelle verwendet, um das Array zu ändern

Anleitung Verwenden Sie den statischen Dateiserver des Knotens

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Optionsüberlagerungsproblem von lselect. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!