recherche

Maison >interface Web >js tutoriel >Le problème de superposition d'options de sélection dans layui

Le problème de superposition d'options de sélection dans layui

小云云
小云云original
2018-03-12 09:21:322073parcourir

Lors de l'utilisation de layui, j'ai rencontré un piège dans la zone de sélection. La valeur dans la sélection ne peut pas être effacée. Les options dans la sélection ont un problème de superposition. Afin de résoudre ce problème et d'accomplir ma fonction, j'ai fait quelques recherches. et que certains Amis qui ont les mêmes besoins ne tombent pas dans le piège, alors voici 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:&#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>

Recommandations associées :

Cours recommandés sur superposition de limites

Utilisation de problèmes et de solutions de superposition de limites de marge en CSS

Utilisation de sous-formules de sélection imbriquées pour résoudre le problème selon lequel MySQL ne peut pas être superposé en utilisant max(sum())

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!

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：Génération de code JS Partage d'exemples de code QRArticle suivant：Génération de code JS Partage d'exemples de code QR

Articles Liés

Voir plus