layui实现三级联动效果
本文实例为大家分享了layui实现三级联动效果的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="src/css/layui.css" />
</head>
<body>
<div class="layui-form">
<div class="layui-input-inline">
<select name="province" lay-filter="province" class="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city" lay-filter="city" disabled>
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="area" lay-filter="area" disabled>
<option value="">请选择县/区</option>
</select>
</div>
</div>
</body>
<script type="text/javascript" src="src/layui.js"></script>
<script type="text/javascript" src="src/address.js"></script>
<script type="text/javascript">
layui.config({
base : "src/" //address.js的路径
}).use([ '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(){};
Address.prototype.provinces = function() {
//加载省数据
var proHtml = '',that = this;
$.get("area",{code:'',type:1}, function (pro) {
for (var i = 0; i < pro.length; i++) {
proHtml += '<option value="' + pro[i].code + '">' + pro[i].name + '</option>';
}
//初始化省数据
$("select[name=province]").append(proHtml);
form.render();
form.on('select(province)', function (proData) {
$("select[name=area]").html('<option value="">请选择县/区</option>');
var value = proData.value;
if (value > 0) {
$.post('area',{code:value,type:2},function (val) {
//console.log(val.length) ;
that.citys(val) ;
},"json");
//that.citys(pro[$(this).index() - 1].childs);
} else {
$("select[name=city]").attr("disabled", "disabled");
}
});
},'json');
}
//加载市数据
Address.prototype.citys = function(citys) {
var cityHtml = '<option value="">请选择市</option>',that = this;
for (var i = 0; i < citys.length; i++) {
cityHtml += '<option value="' + citys[i].code + '">' + citys[i].name + '</option>';
}
$("select[name=city]").html(cityHtml).removeAttr("disabled");
form.render();
form.on('select(city)', function (cityData) {
var value = cityData.value;
if (value > 0) {
$.post('area',{code:value,type:3},function (area) {
that.areas(area) ;
},"json");
//that.areas(citys[$(this).index() - 1].childs);
} else {
$("select[name=area]").attr("disabled", "disabled");
}
});
}
//加载县/区数据
Address.prototype.areas = function(areas) {
var areaHtml = '<option value="">请选择县/区</option>';
for (var i = 0; i < areas.length; i++) {
areaHtml += '<option value="' + areas[i].code + '">' + areas[i].name + '</option>';
}
$("select[name=area]").html(areaHtml).removeAttr("disabled");
form.render();
}
var address = new Address();
exports("address",function(){
address.provinces();
});
});
ajax ->PHP 后台
/**
* 地区三级联动
*/
public function areaAction(){
$code = $this->sys_getparam('code' ) ; // 获取省市区数据
$type = $this->sys_getparam('type' ) ;
if($type==1){ //省
$sql = "
SELECT id AS code,province AS name FROM a_province ;
" ;
}
if($type==2){ //市
$sql = "
SELECT id AS code,city AS name FROM a_city WHERE province_id= $code ;
" ;
}
if($type==3){ //区
$sql = "
SELECT id AS code,district AS name FROM a_district WHERE city_id= $code ;
" ;
}
$areaData = app::dbload($sql,'all');
echo json_encode($areaData) ;
}
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery基于layui实现二级联动下拉选择(省份城市选择)
先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" lay-filter=&q
-
layui实现三级联动效果
本文实例为大家分享了layui实现三级联动效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="
-
简单实现ajax三级联动效果
本文实例为大家分享了ajax三级联动效果展示的具体代码,供大家参考,具体内容如下 主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../wenjian/jquery-2.2.3.min.js"></sc
-
jquery+ajax实现省市区三级联动效果简单示例
本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三
-
js省市县三级联动效果实例
本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>城市三级联动</title> <style type="text/css"> *{ padd
-
js实现简单的省市县三级联动效果实例
本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: js代码部分 //省市县数据格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县
-
基于jquery实现省市区三级联动效果
本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们. JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 说明:数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"&g
-
jQuery+jsp实现省市县三级联动效果(附源码)
本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法.分享给大家供大家参考,具体如下: 在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-connector-java-5.1.13-bin.jar 将实验图贴出来: 显示页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding=
-
android-wheel控件实现三级联动效果
本文实例为大家分享了android wheel省市县三级联动效果,供大家参考,具体内容如下 在github上面有一个叫做 Android-wheel 的开源控件, 代码地址:https://github.com/maarek/android-wheel 源码下载地址:http://xiazai.jb51.net/201610/yuanma/AndroidCascadeMaster(jb51.net).rar 主界面布局 activity_main.xml <LinearLayout xmlns:
-
纯js三维数组实现三级联动效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p>三级联动效果(纯JS实现)</p> <div> 专业方向:
-
使用mint-ui实现省市区三级联动效果的示例代码
引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似. 具体实现: 通过阅读官网的实例,大概就能知道这个组件的用法: 在vue中写入组件:<mt-picker :slots="slots" @change