jquery+ajax实现省市区三级联动 (封装和不封装两种方式)


Posted in jQuery onMay 15, 2017

首先,要实现如下图效果,

jquery+ajax实现省市区三级联动 (封装和不封装两种方式)

1、要理清思路:

先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理。

2、用到的数据库表:Chinastates表

jquery+ajax实现省市区三级联动 (封装和不封装两种方式)

规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询市级(如:北京市辖);根据市级的areacode查询区级(如东城区)

第一种方式:没有用到封装,数据读取较慢,可以看看原理,这样在第二种方式封装时就容易多了。

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="../jquery-1.11.2.min.js"></script>
 </head>
 <body>
 <select id="sheng"></select>
 <select id="shi"></select>
 <select id="qu"></select>
 </body>
</html>
<script type="text/javascript"> 
 $(document).ready(function(e){ 
 //输出省
 var code = "0001";
 $.ajax({ 
  async:false,
  //取消异步
  url:"chuli.php",
  data:{code:code},
  type:"POST",
  dataType:"TEXT",
  success:function(data){    
   var hang = data.trim().split("|"); //trim()去空格
   var str=""; 
   for(var i=0;i<hang.length;i++)
   {
   var lie = hang[i].split("^");
   str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
   }
   $("#sheng").html(str);  
  }   
 });
//输出市
 $("#sheng").click(function(){ 
 var code2=$("#sheng").val(); 
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code2},
  type:"POST",
  dataType:"TEXT",
 success:function(data2){
 
  var hang2 = data2.trim().split("|");
 
  var str2 ="";
  for(var i=0;i<hang2.length;i++)
  {
   var lie2=hang2[i].split("^");
   str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>";
  }
  $("#shi").html(str2);
  }  
 }); 
 })
//输出区县
$("#shi").click(function(){
 var code3=$("#shi").val();
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code3},
  type:"POST",
  dataType:"TEXT",
  success:function(data3){
  var hang3 = data3.split("|");
  var str3 ="";
  for(var i=0;i<hang3.length;i++)
  {
   var lie3=hang3[i].split("^");
   str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";
  }
  $("#qu").html(str3);
  }  
 });
 })
})
</script>

期间出现的问题:每个下拉列表的第一个数据输不出来:是因为每个下拉列表的第一个数据的value值都带有空格!!!所以在输出data时要去空格!!!

data返回的值可能带有空格换行等,所以要用trim()方法去空格!!!

第二种方式:封装成插件,以后可以随时调用(重要)

(1)主页面:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title><br>//引入jquery包
 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件
 <script src="sanji.js"></script>
 </head>
 <body><br>//id要与封装的js插件中一致
 <div id="sanji"></div>
 </body>
</html>

(2)我们自己封装的js插件

$(document).ready(function(e){
 //扔三个下拉列表到主页面建的div中
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 
 //加载省的数据
 LoadSheng();
 //加载市的数据
 LoadShi();
 //加载区的数据
 LoadQu();
 //给省的下拉列表添加点击事件,当省变化时,对应的市和区会发生变化
 $("#sheng").click(function(){
 LoadShi();
 LoadQu();
 }) 
 //给市的下拉列表添加点击事件,当市变化时,对应的区发生变化
 $("#shi").click(function(){
 LoadQu();
 })
 
});

//加载省的下拉列表
function LoadSheng() {
 var pcode = "0001";
 $.ajax({
 async: false,
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value='" + lie[0] + "'>" + lie[1] + "</option>";
  }
  $("#sheng").html(str);
 }
 });
}

//加载市省的下拉列表
function LoadShi() {
 var pcode = $("#sheng").val();
 $.ajax({
 async: false,
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";
  }
  $("#shi").html(str);
 }
 });
}

//加载省的下拉列表
function LoadQu() {
 var pcode = $("#shi").val();
 $.ajax({
 url: "chuli.php",
 data: { code: pcode },
 type: "POST",
 dataType: "TEXT",
 success: function(data) {
  var hang = data.trim().split("|");
  var str = "";
  for(var i = 0; i < hang.length; i++) {
  var lie = hang[i].split("^");
  str = str + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>";
  }
  $("#qu").html(str);
 }
 });
}

 其次就是处理页面(两种方法都用到的):chuli.php

<?php
$code=$_POST["code"];
require "DB.class.php";
$db=new DB();
$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";
$str=$db->strquery($sql);
echo $str;

最后就是封装的类文件:DB.class.php

function strquery($sql)
 {
 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
 $result = $db ->query($sql);
 $arr =$result->fetch_all(); 
 $str="";
 foreach($arr as $v)
 {
 $str=$str.implode("^",$v)."|";
  }
 $str = substr($str,0,strlen($str)-1);
 return $str;
  }
}
?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现简单的抽奖游戏
May 05 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Jquery把获取到的input值转换成json
May 15 #jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 #jQuery
jQuery返回定位插件详解
May 15 #jQuery
jQuery操作css样式
May 15 #jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 #jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 #jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 #jQuery
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP编程风格规范分享
2014/01/15 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
php微信开发之谷歌测距
2018/06/14 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python实现低通滤波器代码
2020/02/26 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
日语专业推荐信
2013/11/12 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
校园活动策划方案
2014/06/13 职场文书
十佳青年事迹材料
2014/08/21 职场文书
升学宴演讲稿
2014/09/01 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
初中语文教学反思范文
2016/03/03 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
golang内置函数len的小技巧
2021/07/25 Golang
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL