这次给大家带来select的option叠加如何处理，select的option叠加处理的注意事项有哪些，下面就是实战案例，一起来看一下。
layui-下拉框联动测试
时间 金额
请选择规则名称
//后台传过来的数据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+=`${e.ruleName}`; }) $('#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+=`${e.ruleName}`; }) $('#test2').append(html); }else if(obj.value==1){ $.each(data,function(i,e){ if(e.unitType==obj.value) html+=`${e.ruleName}`; }) $('#test2').append(html); } form.render('select'); });})//二级联动完毕后获取对应的规则数据$('#btn').click(function(){ var thisValue=data.find((v)=>v.ruleName==$('#test2').val()); console.log(thisValue); })
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue.js中怎么导入css库
vue及element组件的安装方法
以上就是select的option叠加如何处理的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2773688.html
