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.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.zhengjinfan.cn/plugins/layui/layui.js"></script>
<script type="text/javascript" src="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>

  相信现在大家已经知道是如何实现的了,如果还存在有疑问的程序开发者,可以留言给我们,欢迎大家留言共同讨论学习。本文由专业的郑州app开发公司燚轩科技整理发布,如需转载请注明出处。

原文地址:https://www.cnblogs.com/yxkj/p/9305919.html

时间: 2024-10-12 02:32:02

PHP开发中基于layUI的三级联动效果如何实现的相关文章

Android开发之解析XML并实现三级联动效果

请尊重他人的劳动成果,转载请注明出处:Android开发之解析XML并实现三级联动效果 本实例主要应用XmlPullParser解析XML文档中的省市区,然后将数据绑定到Spinner上实现三级联动的效果.关于XmlPullParser的详解大家可以参考<Android开发之使用PULL解析和生成XML>一文. 运行效果图: 程序代码: 核心代码: <pre name="code" class="java">package com.jph.s

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏:) 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网

【转载】Web 开发中很实用的10个效果【附源码下载】

超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.美女很养眼吧 :) 源码下载      在线演示 网页边栏过渡动画 以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推

自写日期年月日三级联动效果jquery插件

哈哈,好久没写新博文啦,原因是最近一直在研究用jquery UI实现截取头像的功能,哈哈 言归正传,有时候呢,我们会在用户资料的页面用到一个年月日日期的三级联动效果.在网上找了找,没看到有多么合适的(主要是本屌丝倾向于用jquery写成插件的形式使用,哈哈~~) 这篇博文呢,主要目的是给大家看下我用jquery写成插件的形式. 原理很简单,就是判断闰年,然后在select change事件的时候给显示日期的select重新append option (PS.不知道为啥,js有appendchil

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

20150303--从SQL中获取数据的三级联动

省市地区的三级联动,每变更一次所选地都需要提交,但是又不需要把整个页面提交,所以我们需要使用控件:UdataPanel.工具--AJAX扩展 还有ScriptManager,并要将其放在页面的最顶端. DropDownList则需要放在UpdatePanel中: HTML源: <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="S

基于jQuery+JSON的省市县 二级 三级 联动效果

省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty

Vue如何使用vue-area-linkage实现地址三级联动效果

很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 一.安装 // v5之前的版本 npm i --save vue-area-linkage // v5及之后的版本 npm i --save vue-area-linkage area-data or yarn // v5之前的版本 yarn add vue-area-linkage // v5及之后的版本 yarn

Web 开发中很实用的10个效果

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏! 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是