如何利用PHP实现开发中基于layUI的三级联动效果的代码_Yii_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • Yii

    当前位置:主页 > 网络编程 > Yii >

    如何利用PHP实现开发中基于layUI的三级联动效果的代码

    时间:2019-10-09|栏目:Yii|点击:
  • 这篇文章主要介绍了关于如何利用PHP实现开发中基于layUI的三级联动效果的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

    后台开发常常用到layUI框架,这样才能让整个页面效果看起来美观大方,然而有时候一些原生的效果放到layUI框架上是无法使用的,比如最近遇到了省市县三级联动的select效果。不同于之前的,layUI框架里,需要重视select的lay-filter属性,来监听事件,另外需要form.render()来重新渲染,解决这两大难题,联动也就不再是难题。下面就来为大家分享下吧。

    实现代码:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>基于 Layui form 组件的省市区级联的实现</title> <link rel="stylesheet" href=http://www.php.cn/"http:/www.zhengjinfan.cn/plugins/layui/css/layui.css" /> </head> <body> <div style="margin: 50px auto; "> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">选择地区</label> <div class="layui-input-inline"> <select name="province" lay-filter="province"> <option value="">请选择省</option> </select> </div> <div class="layui-input-inline" style="display: none;"> <select name="city" lay-filter="city"> <option value="">请选择市</option> </select> </div> <div class="layui-input-inline" style="display: none;"> <select name="area" lay-filter="area"> <option value="">请选择县/区</option> </select> </div> </div> </form> </div> <script type="text/javascript" src=http://www.php.cn/"http:/www.zhengjinfan.cn/plugins/layui/layui.js"></script> <script type="text/javascript" src=http://www.php.cn/"http:/www.zhengjinfan.cn/js/area.js"></script> <script> (function(){ var areaData=Area; var $, $form,form; var $selectProvince,$selectCity,$selectArea; layui.use(['jquery', 'form'], function() { $ = layui.jquery; form = layui.form(); $form = $('form'); $selectProvince=$form.find('select[name=province]'); $selectCity=$form.find('select[name=city]'); $selectArea=$form.find('select[name=area]'); form.on('select(province)', function(data){ var value = data.value; var d = value.split('_'); var code = d[0]; var count = d[1]; var index = d[2]; if(count > 0) { loadCity(areaData[index].mallCityList,index); $selectCity.parent().show(); } else { $selectCity.parent().hide(); $selectArea.parent().hide(); $selectCity.find('[data-new=1]').remove(); $selectArea.find('[data-new=1]').remove(); form.render('select'); } }); form.on('select(city)', function(data){ var value = data.value; var d = value.split('_'); var code = d[0]; var count = d[1]; var index = d[2]; var areaIndex=d[3]; if(count > 0) { loadArea(areaData[index].mallCityList[index].mallAreaList); $selectArea.parent().show(); } else { $selectArea.parent().hide(); } }); form.on('select(area)', function(data){ }); loadProvince(); }); function loadProvince(){ for(var i=0,length=areaData.length;i<length;i++){ $selectProvince.append('<option value="'+ areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">'+areaData[i].provinceName+'</option>') } form.render('select'); } function loadCity(citys,areaIndex){ $selectCity.find('[data-new=1]').remove(); $selectArea.find('[data-new=1]').remove(); for(var i=0,length=citys.length;i<length;i++){ $selectCity.append('<option data-new ="1" value="'+ citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '_'+areaIndex+'">'+citys[i].cityName+'</option>') } form.render('select'); } function loadArea(areas){ $selectArea.find('[data-new=1]').remove(); $selectArea.find('[data-new=1]').remove(); for(var i=0,length=areas.length;i<length;i++){ $selectArea.append('<option data-new ="1" value="'+ areas[i].areaCode+'">'+areas[i].areaName +'</option>') } form.render('select'); } })() </script> </body> </html>

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    关于PHP中debug_backtrace() 函数打印调用处的调试信息

    聊聊框架开发的依赖注入,容器与外观模式(下部)

    以上就是如何利用PHP实现开发中基于layUI的三级联动效果的代码的详细内容,更多请关注php中文网其它相关文章!

    上一篇:关于PHP中debug_backtrace() 函数打印调用处的调试信息

    栏    目:Yii

    下一篇:对LNMP的运维追踪

    本文标题:如何利用PHP实现开发中基于layUI的三级联动效果的代码

    本文地址:http://www.jh-floor.com/wangluobiancheng/Yii/86092.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号