Maison > Article > interface Web > Comment gérer la superposition d'options de sélection
Comment gérer la superposition d'options de sélection
- php中世界最好的语言original
- 2018-03-17 09:50:411471parcourir
Cette fois, je vais vous montrer comment gérer la superposition d'options de select. Quelles sont les précautions pour résoudre la superposition d'options de select. Ce qui suit est un cas pratique, jetons un coup d'œil.
J'utilisais layui et j'ai rencontré un piège dans la zone de sélection. La valeur dans la sélection n'a pas pu être effacée. Il y avait également un problème de superposition avec les options dans la sélection afin de résoudre ce problème et d'y parvenir. ma fonction, j'ai fait des recherches sur Next, 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 avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à d'autres sujets connexes dans l'article du site Web PHP chinois !
Lecture recommandée :
JS implémente la commutation aléatoire de l'identifiant WeChat
String.prototype.format Comment utiliser la concaténation de chaînes
Comment Webpack emballe node.js
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!