layui实现三级联动效果

本文实例为大家分享了获得实现三级联动效果的具体代码，供大家参考，具体内容如下

超文本标记语言头元http-equiv='内容-类型' Content=' text/html；charset=utf-8 '/meta name=' renderer ' content=' web kit ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1 ' meta name=' apple-mobile-web-app-status-bar-style ' content=' black ' meta name=' apple-mobile-web-app-able ' content=' yes ' meta name=' format-detection ' content='请选择省/option/select/div class=' layui-input-inline ' 选择名称=“城市”图层过滤器=“城市”禁用的选项值=' '请选择市/option/select/div class=' layui-input-inline ' select name=' area ' lay-filter=' area ' disabled option value=' '请选择县/区/选项/选择/div/div/正文脚本类型=' text/JavaScript ' src=' http : src/layui。 js /脚本脚本类型=' text/JavaScript ' src=' http : src/address。js /脚本类型=' text/JavaScript ' layui。config({ base : ' src/'//address。js .的路径}).使用([ 'layer '，' jquery '，' address' ]，function(){ var layer=layui。layer，$=layui.jquery，address=layui。address()；});/script html JS:address.js

layui.define(['form '，' jquery']，function(exports){ var form=layui。form，$=layui.jquery，Address=function(){ }；地址原型。省份=function() { //加载省数据var proHtml=' '，那=这个；$.get('area '，{code: ' '，type:1}，function(pro){ for(var I=0；一。长度；I){ ProHTMl=' option value=' pro[I].代码' ' pro[i].name '/option '；} //初始化省数据$("选择[名称=省])。追加(ProHTML)；形式。render()；form.on('select(省份)'，函数(proData){ $('选择[name=area]).html(“”选项值=' '请选择县/区/option ')；定义变量值=proData.valueif(值0) { $。post('area '，{code:value，type:2}，function(val){//console。日志(val。长度)；那个城市. }，' JSON ')；//那个。城市(pro[$(this)).index() - 1].childs)；} else { $(“选择[name=city]”).attr('disabled '，' disabled ')；} });}，' JSON ')；} //加载市数据地址。原型。城市s=函数(城市s){ var city HTMl=' option value=' '请选择市/option '，即=this for(var I=0；一、城市长度；I){ city HTMl=' option value=' city s[I].代码这座城市.name '/option '；} $("选择[name=city]”.Html(城市html).移除attr(' disabled ')；形式。render()；form.on('select(city)'，function(city data){ var value=city data。价值；如果(值0) { $。post('area '，{code:value，type:3}，function(area){ that。区域(面积)；}，' JSON ')；//那个。地区(城市[$(本)).index() - 1].childs)；} else { $('select[name=area]').attr('disabled '，' disabled ')；} });} //加载县/区数据地址。原型。areas=function(areas){ var AreHTML=' option value=' '请选择县/区/option '；for(var I=0；一。面积。长度；I){ AreHTML=' option value=' areas[I].代码'''区域[i].name '/option '；} $("选择[名称=区域]")。html(AreHTML).移除attr(' disabled ')；形式。render()；} var地址=新地址();导出(“address”，function(){ address。省份();});});ajax -PHP后台

/** * 地区三级联动*/public function AreAction(){ $ code=$ this-sys _ getparam(' code ')；//获取省市区数据$ type=$ this-sys _ getparam(' type ')；if($type==1){ //省$sql='选择标识号如同代码，省如同名称出发地_ a省；'；} if($type==2){ //市$sql=' SELECT id AS代码，城市如同名称来自某地省_ id=$ code '；} if($type==3){ //区$sql=' SELECT id AS代码，区如同名称' FROM _ district WHERE _ city id=$ code；'；} $ Aredata=app : db load($ SQL，' all ')；echo JSON _ encode($ Aredata)；}效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。