基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习。
省市区三级联动,样式如下图所示:
1,导入两个js文件并且导入数据库文件。
两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件。
2,建一个index.html
<div>
<label>所在地点</label>
<select name="province_id" id="province_id" style="width:150px;">
<option>请选择</option>
<volist name="province_list" id="province">
<option value="{$province.region_id}">{$province.region_name}</option>
</volist>
</select>
<select name="city_id" id="city_id" style="width:150px;" >
<option>请选择</option>
<volist name="city_list" id="city">
<option value="{$city.region_id}" selected="selected">{$city.region_name}</option>
</volist>
</select>
<select name="district_id" id="district_id" style="width:150px;" >
<option value="0">请选择</option>
<volist name="dis_list" id="dis">
<option value="{$dis.region_id}" selected="selected">{$dis.region_name}</option>
</volist>
</select>
</div>
写ajax啦,一个是获取市,一个是获取县区。
<script>
$("#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></option>");
$(option).val("0");
$(option).html("请选择");
var option1=$("<option></option>");
$(option1).val("0");
$(option1).html("请选择");
$("#city_id").html(option);
$("#district_id").html(option1);
for(var i in city){
var option=$("<option></option>");
$(option).val(city[i]['region_id']);
$(option).html(city[i]['region_name']);
$("#city_id").append(option);
}
} });
});
</script>
<script>
$("#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></option>");
$(option).val("0");
$(option).html("请选择");
$("#district_id").html(option);
for(var i in district){
var option=$("<option></option>");
$(option).val(district[i]['region_id']);
$(option).html(district[i]['region_name']);
$("#district_id").append(option);
}
}
});
});
</script>
2,后台代码很重要。
<?php
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));
}
下面是核心代码和数据库文件,需要的下载就可以了。
http://pan.baidu.com/s/1kU2RDTP
基于ThinkPHP+AJAX的省市区三级联动的更多相关文章
- 第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即可. 使用方法: <!DOCTYPE html><html>< ...
- 省市区三级联动(二)JS部分简单版
通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...
随机推荐
- 我的VSTO之路(五):Outlook初步开发之联系人扩展
原文:我的VSTO之路(五):Outlook初步开发之联系人扩展 上一讲我们完成对Word的介绍,文本开始,我将着重介绍Outlook.Outlook是微软Office中一个非常实用的工具,尤其在一个 ...
- Spring MVC学习总结。
公司项目用的Spring MVC.顺便学习学习. 其实框架并没有想象中的复杂.尤其对于初学者,总觉得SSH是一些很复杂的东西似的.其实对初学者来说能够用这些框架就足够了.在公司里也是,基本功能会用了就 ...
- 物理卷操作命令:pvcreate,pvscan,pvdisplay.卷组操作命令:vgcreate,vgdisplay.
新硬盘创建LVM系统过程. 物理卷操作命令:pvcreate,pvscan,pvdisplay. 卷组操作命令:vgcreate,vgdisplay. 逻辑卷操作命令:lvcreate,lvdispl ...
- Android RSA加密对象数据
前几天说了手头项目用MD5和双向加密DES来进行加密的,因为产品是在不断的改造中完善的.考虑到DES和MD5加解密还是会存下一定的风险,于是产品一拍,不行,听你们说MD5加密是不安全的,咱们产品以后做 ...
- Search for a Range ——LeetCode
Given a sorted array of integers, find the starting and ending position of a given target value. You ...
- bzoj 2324 [ZJOI2011]营救皮卡丘(floyd,费用流)
2324: [ZJOI2011]营救皮卡丘 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1777 Solved: 712[Submit][Stat ...
- kvm编译安装及常见问题解决
一.KVM的编译安装 1.安装基本系统和开发工具 1.1 编译内核 mkdir /root/kvm cd /root/kvm wget http://www.kernel.org/pub/linux/ ...
- 敏捷开发 and 敏捷测试
名词解释 agile: 敏捷的:灵活:敏捷开发. scrum: 扭打,混打:并列争球:参加并列争球. sprint: 冲刺,全速跑. backlog: 积压的工作:积压待办的事务. retrospe ...
- 【repost】如何学好编程 (精挑细选编程教程,帮助现在在校学生学好编程,让你门找到编程的方向)四个方法总有一个学好编程的方法适合你
方法(一)编了这么久的程序,一直想找机会总结下其中的心得和方法,但回想我这段编程道路,又很难说清楚,如果按照我走过的所有路来说,显然是不可能的!当我看完了云风的<游戏之旅--编程感悟>和梁 ...
- jeety and tomcat plugins In Maven
(转自)maven jetty 插件使用 本机环境 JDK 7 Maven 3.2 Jetty 9.2 Eclipse Luna pom.xml 配置 在你的 pom.xml 文件中添加 jetty ...