php和ajax写三级联动,基于thinkphp和ajax的省市区三级联动

练习，就当练习。

省市区三级联动，样式如下图所示：

1，导入两个js文件并且导入数据库文件。

两个js文件分别是jquery-2.1.4.min.js和jquery-1.js，数据库文件，见附件。

2，建一个index.html

所在地点

请选择

{$province.region_name}

请选择

{$city.region_name}

请选择

{$dis.region_name}

写ajax啦，一个是获取市，一个是获取县区。

$("#province_id").change(function(){

var province_id=$(this).val();

$.ajax({

url:'/city/index.php/Home/Index/get_citys',

Type:"POST",

data:"province_id="+province_id,

dataType:"json",

success:function(data){

var city = data.city;

var option=$("");

$(option).val("0");

$(option).html("请选择");

var option1=$("");

$(option1).val("0");

$(option1).html("请选择");

$("#city_id").html(option);

$("#district_id").html(option1);

for(var i in city){

var option=$("");

$(option).val(city[i]['region_id']);

$(option).html(city[i]['region_name']);

$("#city_id").append(option);

}

}

});

});

$("#city_id").change(function(){

var city_id=$(this).val();

$.ajax({

url:'/city/index.php/Home/Index/get_district',

Type:"POST",

data:"city_id="+city_id,

dataType:"json",

success:function(data){

var district = data.district;

var option=$("");

$(option).val("0");

$(option).html("请选择");

$("#district_id").html(option);

for(var i in district){

var option=$("");

$(option).val(district[i]['region_id']);

$(option).html(district[i]['region_name']);

$("#district_id").append(option);

}

}

});

});

2，后台代码很重要。

namespace Home\Controller;

use Think\Controller;

class IndexController extends Controller {

//获取省和直辖市

public function index(){

$listObj = M('region');

$whereprovince['top_parentid'] = 0;

$listprovince = $listObj->where($whereprovince)->select();

$this->assign("province_list",$listprovince);

$this->display();

}

//获取地级市

public function get_citys(){

$listObj = M('region');

$where['top_parentid'] = I('province_id');

$where['level'] = 2;

$list = $listObj->where($where)->select();

$data=array('status'=>0,'city'=>$list);

header("Content-type: application/json");

exit(json_encode($data));

}

//获取地级县

public function get_district(){

$listObj = M('region');

$where['parent_id'] = I('city_id');

$where['level'] = 3;

$list = $listObj->where($where)->select();

$data=array('status'=>0,'district'=>$list);

header("Content-type: application/json");

exit(json_encode($data));

}

下面是核心代码和数据库文件，需要的下载就可以了。

第117天：Ajax实现省市区三级联动

Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建o ...

基于ThinkPHP+AJAX的省市区三级联动

练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

(jquery+ajax)省市区三级联动(封装和不封装两种方式)-----2017-05-14

首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

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

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)

在web中,实现三级联动很常见,尤其是利用jquery+json.但是从根本上来说jquery并不是最能让人容易理解的,接下来从最基本的javascript开始,实现由javascript+json+ ...

JS省市区三级联动

不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: &lt ...

省市区三级联动(二)JS部分简单版

通过对上一篇的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...

随机推荐

BZOJ 1770: [Usaco2009 Nov]lights 燈

Description 一个图,对一个点进行操作会改变这个点及其相邻的点的状态,问全部变成黑色至少需要几次.数据保证有解. Sol Meet in middle. 我一开始写个高斯消元,发现有两个点过 ...

Android获取时间

java代码: import java.text.SimpleDateFormat;SimpleDateFormat formatter = new SimpleDateFormat ('yyyy年M ...

深入C#判断操作系统类型的总结详解(转载)

Windows操作系统的版本号一览 操作系统  PlatformID  主版本号  副版本号  Windows95  1  4  0  Windows98  1  4  10  WindowsMe   ...

Unity3D 将 Unity 嵌入WPF中的一些研究笔记

一. 在 WPF 中使用 WebBrowser,直接打开 WebPlayer.html 以这种方式有一个问题是. 无法在 WebBrowser 的上面 放置其它的控件, 在运行时,都不会显示 . 以 ...

Rectangles

Given two rectangles and the coordinates of two points on the diagonals of each rectangle,you have t ...

spark streaming(2) DAG静态定义及DStream,DStreamGraph

DAG 中文名有向无环图.它不是spark独有技术.它是一种编程思想 ,甚至于hadoop阵营里也有运用DAG的技术,比如Tez,Oozie.有意思的是,Tez是从MapReduce的基础上深化而来的 ...

Ionic 常用组件解析

Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...

又拍云张聪：OpenResty 动态流控的几种姿势

2019 年 1 月 12 日,由又拍云.OpenResty 中国社区主办的 OpenResty × Open Talk 全国巡回沙龙·深圳站圆满结束,又拍云首席架构师张聪在活动上做了< Ope ...

c&num; 多线程 读写分离

class Program { private static ReaderWriterLockSlim _LockSlim = new ReaderWriterLockSlim(); private ...

2018年设计师都在用的PS切图插件--摹客iDoc

终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...