封装layui模块化三级联动(运行只需要一行代码)

最新推荐文章于 2024-08-09 20:33:11 发布
最新推荐文章于 2024-08-09 20:33:11 发布
阅读量542 收藏 3
点赞数 1
分类专栏： layui 文章标签： 三级联动 layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25403173/article/details/101061987
版权

封装layui模块化三级联动(运行只需要一行代码)
1.0百度网盘下载地址(接受6个参数不可复用无返回值)
链接: https://pan.baidu.com/s/1f-juQ_K51ZnZrLWoWKnvVQ 提取码: 5yff

2.0百度网盘下载地址(接受9个参数可复用有返回值)
链接: https://pan.baidu.com/s/12fSfDDOrlDLUtXvncIGigA 提取码: ddsg

非常简单明了的layui的三级联动先上代码1.0(接收6个参数没返回值版本)
html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="css/bootstrap.css" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<div id="main"></div>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery.js"></script>
<script>
	//设置模块
	layui.config({
		base:'js/'
	}).use(['test','jquery','form','layedit'], function(){
		    var test = layui.test,
		   			$ = layui.jquery,
		    		form = layui.form;
		    		layedit = layui.layedit;
		    //传参
//		    1.三级联动要放到的div
//		    2.接口地址 可写本地接口和网络接口
//		    3.三级联动的表头字
//		    4.三级联动第一级默认值id
//		    5.三级联动第二级默认值id
//		    6.三级联动第三级默认值id
		    test.init('main','http://localhost:3000/data','三级联动',3,32,321);
		   	form.render();
		});
</script>
</body>
</html>

js部分


layui.define(["jquery","layer",'form','layedit'], function(exports) {
	var $ = layui.jquery,
		layer = layui.layer,
		form = layui.form,
		layedit = layui.layedit;
		var  ZHC_Category = {
			//
			init:function(ID,URL,NAME,Default1,Default2,Default3){
				//定义dom结构
				$("#"+ID+"").append(
				`
					<form class="layui-form" action="">
						<div class="layui-inline">
							<div class="layui-form-item">
							    <label class="layui-form-label" style="width:120px">${NAME}</label>
							    <div class="layui-input-inline">
							        <select name="province" id="province" lay-filter="yiji">
								     	<option value="请选择">请选择</option>
							        </select>
							   	</div>
							    <div class="layui-input-inline">
							      	<select name="city" id="city" lay-filter="erji">
								     	<option value="请选择">请选择</option>
							      	</select>
							    </div>
							    <div class="layui-input-inline">
							      	<select name="town" id="town" lay-filter="sanji">
							        	<option value="请选择">请选择</option>
							     	</select>
							    </div>
							</div>
						</div>
					</form>
				`
				);
				//渲染数据
				var province=$("#province"),
					city=$("#city"),
					town=$("#town");
				var provinceList;
				
				var two;
				//getJSON获取本地json
				$.getJSON(""+URL+"",function(data){
					console.log(data)
					provinceList = data;
					//一级默认选择
					for(var i=0;i<provinceList.length;i++){
						 if(Default1!=provinceList[i].id){
						 	addEle(province,provinceList[i].name);
						 }else if(Default1==provinceList[i].id){
						 	var optionStr1="";
						    optionStr1="<option value="+provinceList[i].name+" selected=''>"+provinceList[i].name+"</option>";
						    province.append(optionStr1);
						    form.render();
						    //二级默认选择
						    for(var j=0;j<provinceList[i].cityList.length;j++){
						    	if(Default2!=provinceList[i].cityList[j].id){
								 	addEle(city,provinceList[i].cityList[j].name);
								 }else if(Default2==provinceList[i].cityList[j].id){
								 	var optionStr2="";
								 	two = j;
								    optionStr2="<option value="+provinceList[i].cityList[j].name+" selected=''>"+provinceList[i].cityList[j].name+"</option>";
								    city.append(optionStr2);
								    form.render();
								     //三级默认选择
								   
								    if(Default3!=undefined||Default3!=null){
								    	for(var k=0;k<provinceList[i].cityList[j].areaList.length;k++){
								    		if(Default3!=provinceList[i].cityList[j].areaList[k].id){
											 	var optionStr3="";
											    optionStr3="<option value="+provinceList[i].cityList[j].areaList[k].name+">"+provinceList[i].cityList[j].areaList[k].name+"</option>";
											    town.append(optionStr3);
											    form.render();
											}else if(Default3==provinceList[i].cityList[j].areaList[k].id){
											 	var optionStr3="";
											    optionStr3="<option value="+provinceList[i].cityList[j].areaList[k].name+" selected=''>"+provinceList[i].cityList[j].areaList[k].name+"</option>";
											    town.append(optionStr3);
											    form.render();
											}
									    }
								    }
								 }
						    }
						 }
					}
					function addEle(ele,value){
						console.log(value);
				    	var optionStr="";
					    optionStr="<option value="+value+">"+value+"</option>";
					    ele.append(optionStr);
					}
					function removeEle(ele){
					    ele.find("option").remove();
					    var optionStar="<option value="+"请选择"+">"+"请选择"+"</option>";
					    ele.append(optionStar);
					}
					var provinceText,cityText,cityItem;
					//如果一级默认默认赋值 监听一级的value给二级
					if(Default1!=undefined||Default1!=null){
						var provinceText = Default1;
						console.log("一级默认");
						 $.each(provinceList,function(i,item){
					        if(provinceText == item.id){
					            cityItem=i;
					            return cityItem
					        }
					    });
					}
					//监听一级选项
					form.on('select(yiji)',function(data){
						var provinceText = data.value;
						console.log("一级变化");
						 $.each(provinceList,function(i,item){
					        if(provinceText == item.name){
					            cityItem=i;
					            return cityItem
					        }
					    });
					    removeEle(city);
					    removeEle(town);
					    $.each(provinceList[cityItem].cityList,function(i,item){
					        addEle(city,item.name)
					    })
					    form.render();
					})
					//如果二级默认默认赋值 监听二级的value给三级

					if(Default3==undefined||Default3==null){
						if(Default2!=undefined||Default2!=null){
							//默认值
							var cityText = Default2;
							console.log("二级默认");
							$.each(provinceList,function(i,item){
						        if(provinceText == item.id){
						            cityItem=i;
						            return cityItem
						        }
						    });
						   
						    $.each(provinceList[cityItem].cityList[two].areaList,function(i,item){
						        addEle(town,item.name)
						    })
						}
					}
					//监听二级选项
					form.on('select(erji)',function(data){
						var cityText = data.value;
						console.log('二级变化');
						removeEle(town);
					    $.each(provinceList,function(i,item){
					        if(provinceText == item.id){
					            cityItem=i;
					            return cityItem
					        }
					    });
					    console.log(cityItem);
					    $.each(provinceList[cityItem].cityList,function(i,item){
					        if(cityText == item.name){
					            for(var n=0;n<item.areaList.length;n++){
					            	console.log(item.areaList[n].name);
					                addEle(town,item.areaList[n].name)
					            }
					        }
					    });
					    form.render();
					})
					form.render();
				})
			}
		}
			
		exports('test', ZHC_Category);
});

模拟后台的json代码

{   

    "data":[
    {  
        "id":1,
        "name":"北京",
        "cityList":
        [
            {   
                "id":11,
                "name":"市辖区",
                "areaList":[
                    {   
                        "id":111, 
                        "name":"东城区"
                    },
                    {   
                        "id":112, 
                        "name":"西城区"
                    },
                    {   
                        "id":113, 
                        "name":"怀柔区"
                    },
                    {   
                        "id":114, 
                        "name":"平谷区"
                    }
                ]
            },
            {
                "id":12,
                "name":"县", 
                "areaList":[
                    {   
                        "id":121, 
                        "name":"密云县"
                    },
                    {   
                        "id":131, 
                        "name":"延庆县"
                    }
                ]
            }
        ]
    },
    {   
        "id":2,
        "name":"上海",
        "cityList":[
            {   
                "id":21,
                "name":"市辖区", "areaList":[
                     {   
                        "id":211, 
                        "name":"黄浦区"
                    },
                     {   
                        "id":212, 
                        "name":"卢湾区"
                    },
                     {   
                        "id":213, 
                        "name":"长宁区"
                    },
                     {   
                        "id":214, 
                        "name":"静安区"
                    },
                     {   
                        "id":215, 
                        "name":"普陀区"
                    },
                     {   
                        "id":216, 
                        "name":"宝山区"
                    },
                     {   
                        "id":217, 
                        "name":"虹口区"
                    },
                     {   
                        "id":217, 
                        "name":"青浦区"
                    },
                    {   
                        "id":219, 
                        "name":"南汇区"
                    }
                ]
            },
            {   
                "id":22,
                "name":"县",
                "areaList":[
                    {   
                        "id":221, 
                        "name":"崇明县"
                    }
                ]
            }
        ]
    },
    {
        "id":3,
        "name":"天津",
        "cityList":[
            {   
                "id":31,
                "name":"市辖区",
                "areaList":[
                    {   
                        "id":311, 
                        "name":"和平区"
                    },
                    {   
                        "id":312, 
                        "name":"河东区"
                    },
                    {   
                        "id":313, 
                        "name":"河西区"
                    },
                    {   
                        "id":314, 
                        "name":"南开区"
                    },
                    {   
                        "id":315, 
                        "name":"河北区"
                    }
                ]
            },
            {
                "id":32,
                "name":"县",
                "areaList":[
                    {   
                        "id":321, 
                        "name":"宁河县"
                    },
                    {   
                        "id":322, 
                        "name":"静海县"
                    },
                    {   
                        "id":323, 
                        "name":"蓟　县"
                    }
                ]
            }
        ]
    },
    {   
        "id":4,
        "name":"重庆",
        "cityList":[
            {   
                "id":41,
                "name":"市辖区",
                "areaList":[
                    {   
                        "id":411, 
                        "name":"万州区"
                    },
                    {   
                        "id":412, 
                        "name":"涪陵区"
                    },
                    {   
                        "id":413, 
                        "name":"渝中区"
                    },
                    {   
                        "id":414, 
                        "name":"大渡口区"
                    },
                    {   
                        "id":415, 
                        "name":"江北区"
                    }
                ]
            },
            {
                "id":42,
                "name":"县",
                "areaList":[
                    {   
                        "id":421, 
                        "name":"綦江县"
                    },
                    {   
                        "id":422, 
                        "name":"潼南县"
                    },
                    {   
                        "id":423, 
                        "name":"彭水苗族土家族自治县"
                    }
                ]
            },
            {
                "id":43,
                "name":"市", "areaList":[
                    {   
                        "id":431, 
                        "name":"江津市"
                    },
                    {   
                        "id":432, 
                        "name":"合川市"
                    }
                ]
            }
        ]
    }
]
}

非常简单明了的layui的三级联动2.0(接收9个参数有返回值版本)
html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="css/bootstrap.css" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<div id="main">
		
	</div>
	<div id="main1">
		
	</div>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery.js"></script>
<script>
	//设置模块
	layui.config({
		base:'js/'
	}).use(['test','jquery','form','layedit'], function(){
		    var test = layui.test,
		   			$ = layui.jquery,
		    		form = layui.form;
		    		layedit = layui.layedit;
		    var value = new Array;
		    //传参
				//1.三级联动要放到的div
				//2.接口地址 可写本地接口和网络接口
				//3.三级联动的表头字
				//4.定义第一级select的id以便创建多个联动
				//4.定义第二级select的id以便创建多个联动
				//4.定义第三级select的id以便创建多个联动
				//4.三级联动第一级默认值id
				//5.三级联动第二级默认值id
				//6.三级联动第三级默认值id
				
			
				//获取返回的数组    注!同时函数已经执行一次 
				value = test.init('main','http://localhost:3000/data','三级联动','province','city','town',4,42,422);
		    value.forEach(function(data,index){
		    	value[index] = data
		    })
		    //打印返回的value值
		    console.log(value)
		   	form.render();
		   	
		});
</script>
</body>
</html>

js代码部分



layui.define(["jquery","layer",'form','layedit'], function(exports) {
	var $ = layui.jquery,
		layer = layui.layer,
		form = layui.form,
		layedit = layui.layedit;
		var  ZHC_Category = {
			
			//初始化
			init:function(ID,URL,NAME,selectID1,selectID2,selectID3,Default1,Default2,Default3){
				//定义dom结构
				$("#"+ID+"").append(
				`
					<form class="layui-form" action="">
						<div class="layui-inline">
							<div class="layui-form-item">
							    <label class="layui-form-label" style="width:120px">${NAME}</label>
							    <div class="layui-input-inline">
							        <select name="province" id="${selectID1}" lay-filter="yiji">
								     	<option value="请选择">请选择</option>
							        </select>
							   	</div>
							    <div class="layui-input-inline">
							      	<select name="city" id="${selectID2}" lay-filter="erji">
								     	<option value="请选择">请选择</option>
							      	</select>
							    </div>
							    <div class="layui-input-inline">
							      	<select name="town" id="${selectID3}" lay-filter="sanji">
							        	<option value="请选择">请选择</option>
							     	</select>
							    </div>
							</div>
						</div>
					</form>
				`
				);
				//渲染数据
				var province=$("#"+selectID1+""),
					city=$("#"+selectID2+""),
					town=$("#"+selectID3+""),
					provinceValue,
					cityValue,
					townValue;
				var Url = [];
				var provinceList;
				
				var two;
				
				//必须更改ajax获取数据为同步
				$.ajaxSettings.async = false;
				//getJSON获取本地json或后台接口jsono
				$.getJSON(""+URL+"",function(data){
					console.log(data)
					provinceList = data;
					//一级默认选择
					for(var i=0;i<provinceList.length;i++){
						 if(Default1!=provinceList[i].id){
						 	addEle(province,provinceList[i].name);
						 }else if(Default1==provinceList[i].id){
						 	var optionStr1="";
						    optionStr1="<option value="+provinceList[i].name+" selected=''>"+provinceList[i].name+"</option>";
						    //保留一级的值
						 	provinceValue = provinceList[i].name
						    province.append(optionStr1);
						    form.render();
						    //二级默认选择
						    for(var j=0;j<provinceList[i].cityList.length;j++){
						    	if(Default2!=provinceList[i].cityList[j].id){
								 	addEle(city,provinceList[i].cityList[j].name);
								 }else if(Default2==provinceList[i].cityList[j].id){
								 	var optionStr2="";
								 	two = j;
								    optionStr2="<option value="+provinceList[i].cityList[j].name+" selected=''>"+provinceList[i].cityList[j].name+"</option>";
								    //保留二级的值
						 			cityValue = provinceList[i].cityList[j].name;
								    city.append(optionStr2);
								    form.render();
								     //三级默认选择
								    if(Default3!=undefined||Default3!=null){
								    	for(var k=0;k<provinceList[i].cityList[j].areaList.length;k++){
								    		if(Default3!=provinceList[i].cityList[j].areaList[k].id){
											 	var optionStr3="";
											    optionStr3="<option value="+provinceList[i].cityList[j].areaList[k].name+">"+provinceList[i].cityList[j].areaList[k].name+"</option>";
											    town.append(optionStr3);
											    form.render();
											}else if(Default3==provinceList[i].cityList[j].areaList[k].id){
											 	var optionStr3="";
											    optionStr3="<option value="+provinceList[i].cityList[j].areaList[k].name+" selected=''>"+provinceList[i].cityList[j].areaList[k].name+"</option>";
											    //保留三级的值
						 						townValue = provinceList[i].cityList[j].areaList[k].name;
											    town.append(optionStr3);
											    form.render();
											}
									    }
								    }
								 }
						    }
						 }
					}
					function addEle(ele,value){
				    	var optionStr="";
					    optionStr="<option value="+value+">"+value+"</option>";
					    ele.append(optionStr);
					}
					function removeEle(ele){
					    ele.find("option").remove();
					    var optionStar="<option value="+"请选择"+">"+"请选择"+"</option>";
					    ele.append(optionStar);
					}
					var provinceText,cityText,cityItem;
					//如果一级默认默认赋值 监听一级的value给二级
					if(Default1!=undefined||Default1!=null){
						var provinceText = Default1;
						console.log("一级默认");
						 $.each(provinceList,function(i,item){
					        if(provinceText == item.id){
					            cityItem=i;
					            return cityItem
					        }
					    });
					}
					//监听一级选项
					form.on('select(yiji)',function(data){
						var provinceText = data.value;
						console.log("一级变化");
						//一级改变保存二级vakue值
						provinceValue = data.value;
						if(provinceValue=='请选择'){
							Url[0] = '';
						}else{
							Url[0] = provinceValue;
						};
						Url[1] = '';
						Url[2] = '';
						console.log(Url);
						 $.each(provinceList,function(i,item){
					        if(provinceText == item.name){
					        	
					            cityItem=i;
					            return cityItem
					        }
					    });
					    removeEle(city);
					    removeEle(town);
					    $.each(provinceList[cityItem].cityList,function(i,item){
					        addEle(city,item.name)
					    })
					    form.render();
					})
					//如果二级默认默认赋值 监听二级的value给三级

					if(Default3==undefined||Default3==null){
						if(Default2!=undefined||Default2!=null){
							//默认值
							var cityText = Default2;
							console.log("二级默认");
							$.each(provinceList,function(i,item){
						        if(provinceText == item.id){
						            cityItem=i;
						            return cityItem
						        }
						    });
						   
						    $.each(provinceList[cityItem].cityList[two].areaList,function(i,item){
						        addEle(town,item.name)
						    })
						}
					}
					//监听二级选项
					form.on('select(erji)',function(data){
						var cityText = data.value;
						console.log('二级变化');
						//二级改变保存二级vakue值
						cityValue = data.value;
						if(cityValue=='请选择'){
							Url[1] = '';
						}else{
							Url[1] = cityValue;
						};
						Url[2] = ''
						console.log(Url);
						removeEle(town);
					    $.each(provinceList,function(i,item){
					        if(provinceText == item.id){
					            cityItem=i;
					            return cityItem
					        }
					    });
					    $.each(provinceList[cityItem].cityList,function(i,item){
					        if(cityText == item.name){
					            for(var n=0;n<item.areaList.length;n++){
					                addEle(town,item.areaList[n].name)
					            }
					        }
					    });
					    form.render();
					})
					form.on('select(sanji)',function(data){
						//三级改变保存二级vakue值
						townValue = data.value;
						if(townValue=='请选择'){
							Url[2] = '';
						}else{
							Url[2] = townValue;
						};
						console.log(Url);
					})
					form.render();
					//返回三个value
					Url[0] = provinceValue,
					Url[1] = cityValue,
					Url[2] = townValue;
				});
				console.log(Url);
				return Url
			}
		}
			
		exports('test', ZHC_Category);
});

模块init函数最多接受6个参数版本1.0
第一个 定义三级联动dom的外层div(必填)
第二个 定义了三级联联动请求的后台接口 也可以写本地接口 返回的json形式参考上面的json的代码块标注
第三个 定义三级联动的标题 如果想每个select框有自己的标题 请修改js代码里面的dom结构(必填)
第四个 定义了第一个select默认的value 填对应的id(可不填)
第五个 定义了第二个select默认的value 填对应的id(可不填)
第六个 定义了第三个select默认的value 填对应的id(可不填)
1.0百度网盘下载地址(接受6个参数不可复用无返回值)
链接: https://pan.baidu.com/s/1f-juQ_K51ZnZrLWoWKnvVQ 提取码: 5yff
模块init函数最多接受9个参数版本2.0
第一个 定义三级联动dom的外层div(必填)
第二个 定义了三级联联动请求的后台接口 也可以写本地接口 返回的json形式参考上面的json的代码块标注
第三个 定义三级联动的标题 如果想每个select框有自己的标题 请修改js代码里面的dom结构(必填)
第四个 定义第一级select的id以便创建多个联动(必填)
第五个 定义第二级select的id以便创建多个联动(必填)
第六个 定义第三级select的id以便创建多个联动(必填)
第七个 定义了第一个select默认的value 填对应的id(可不填)
第八个 定义了第二个select默认的value 填对应的id(可不填)
第九个 定义了第三个select默认的value 填对应的id(可不填)
2.0百度网盘下载地址(接受9个参数可复用有返回值)
链接: https://pan.baidu.com/s/12fSfDDOrlDLUtXvncIGigA 提取码: ddsg

不带默认参数的效果
在这里插入图片描述
带默认参数的效果
在这里插入图片描述
注意!
渲染的select dom是比较单一的 如果要更改样式请在js内更改后续解决

优点:简洁明了 小白拿过来直接用 缺点:对后端接口格式有要求 select的dom渲染比较单一布局不是非常自由

总感觉挺好的
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
封装简易实用layui三级联动(一行代码实现).rar
09-20
简易的 layui 三级联动 使用只需要一行代码 封装到了layui模块 layui专用
PHP开发中基于layUI的三级联动效果如何实现
燚轩软件科技
07-13 895
　　后台开发常常用到layUI框架，这样才能让整个页面效果看起来美观大方，然而有时候一些原生的效果放到layUI框架上是无法使用的，比如最近遇到了省市县三级联动的select效果。不同于之前的，layUI框架里，需要重视select的lay-filter属性，来监听事件，另外需要form.render()来重新渲染，解决这两大难题，联动也就不再是难题。下面就来为大家分享下吧。　　实现代码：&lt;...
layui联动下拉选的封装
XIAIANAN的博客
01-14 212
<div class="layui-inline"> <label class="layui-form-label">场 站：</label> <div class="layui-input-inline"> <select class="selectpicker" id="slpk" data-live...
layui-省市县三级联动下拉框.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
超简单的三级联动 javascript代码
11-29
超级简单的js三级联动代码，信不信由你，分享一下
JS封装的三级联动菜单(使用时只需要一行js代码)
11-27
使用简单(只需要一行代码) 可以根据需要设置是否显示“请选择”项 支持回调(在三级分类加载完成后触发回调事件) 支持一个页面多个级联菜单 演示效果预览： 三级联动封装 原理：将selec标签以及相关的html代码用js...
微信小程序 使用picker封装省市区三级联动实例代码
09-01
为了实现省市区三级联动的效果，我们需要对Picker进行封装，使得当用户在某一级选择时，下一级的数据会相应更新。以下是封装省市区三级联动的具体步骤和涉及的知识点： 1. **使用Template模板语法**： 微信小程序...
简单的vue三级联动下拉框代码
06-11
总结，"简单的vue三级联动下拉框代码"是一个实际项目中常见的需求，通过Vue.js的数据绑定、组件化以及计算属性等特性，可以方便地实现这种功能，提高开发效率。理解并掌握这些知识点对于提升Vue.js开发能力大有裨益...
layui封装的省市区三级联动插件
qq_38763540的博客
04-09 2005
这个插件使用非常简单，下载好相应的框架文件，拿来即用即可 插件使用展示： 插件下载地址：http://www.jpw.net/code/636431820895762098 使用方法在下载地址有具体的展示，下面只是对它的使用总结 使用步骤： 1.下载layui，在页面引入layui.css和layui.js（官网下载地址：https://www.layui.com/） 2.下载jq...
php-省市区三级联动
06-14
一个很好用的省市区三级联动，根据你是否已存有该省市区联动的信息做处理，新增或修改
layui多选级联选择器
02-23
使用layui实现的可以多选的级联选择器，无限级联选择
Select-下拉列表多级联动
09-05
下拉列表多级联动，根据xml文件可以生成三个下拉列表，并且根据所选内容不同，可以显示不同的内容
layui基本使用视频教程
08-01
此为layui基本使用视频教程百度云下载地址，如有问题可以按照文档里面联系本人
select三级联动选择—基于layui的select
努力学习Java的彬彬的博客
04-10 5728
三级联动选择
layui 三级联动，简单实现
Ysy3757的博客
11-02 760
本文采用 TP5.0 框架 html： <div class="layui-form-item"> <div class="layui-form-label">地址</div> <div class="layui-input-inline" style="width: 200px;"> <select name="province" id="province" lay-filter="province"...
avue 实现下拉框事件 自动填充其他框_简单三级联动的实现
weixin_39840606的博客
11-27 2796
当我们做一些例如注册页面的时候，可能会遇到要选择地址的操作，这时会出现三个选择框，当你选择省级单位的时候会自动在选择筐中，弹出她所属的市级单位的列表，当选择市级单位时又会弹出县级单位，我们要实现的就是这样的三级联动，当然也会有更简单的插件方法，但学习，我们可以通过这来看它运行的过程。我么要实现的需求是这样的：页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框选择省，则市下拉框中出现对应...
【layui】省市区的三级联动
Minions_Fatman的博客
06-24 1067
layui省市区的三级联动
html省级菜单联动
qq_42946963的博客
10-28 7171
二级联动 <script> // 创建一个二维数组 var arr = new Array(2); arr[0] = ["广东","广州","深圳","佛山"]; arr[1] = ["湖北","荆州","武汉","赤壁"]; function choose(val){ ...
layui省市区三级联动及三级下拉框回显
a_11111112的博客
08-25 1767
layui省市区三级联动及三级下拉框回显
LayUi插件
最新发布
qq_35641191的博客
08-09 266
LayUi插件
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值