Maison > Article > interface Web > Comment résoudre le problème de superposition d'options de lselect

Comment résoudre le problème de superposition d'options de lselect

php中世界最好的语言original: 2018-03-29 09:33:021753parcourir

Cette fois, je vais vous montrer comment résoudre le problème de superposition d'options de lselect. Quelles sont les précautions pour résoudre le problème de superposition d'options de lselect. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'éditeur, j'utilise layui, et j'ai rencontré un piège dans la zone de sélection. La valeur dans la sélection ne peut pas être effacée, et les options dans la sélection ont un problème de superposition afin de résoudre ce problème. et atteindre ma fonction, j'Après quelques recherches, pour que des amis qui ont les mêmes besoins ne tombent pas dans le piège, j'ai posté mon code source :

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

Je crois que vous maîtrisez la méthode après lecture C'est le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment gérer le fait que la page ne s'affiche pas lorsque Vue utilise le tableau suivant pour modifier le tableau

Comment utiliser le serveur de fichiers statique du nœud

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php layui select

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À quoi devons-nous prêter attention dans le cross-domaine et le rendu de vue2.0 axios ?Article suivant：À quoi devons-nous prêter attention dans le cross-domaine et le rendu de vue2.0 axios ?

Articles Liés

Voir plus