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 Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现本地存储
Dec 22 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
php缓冲输出实例分析
2015/01/05 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
python绘制汉诺塔
2021/03/01 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
《月迹》教学反思
2014/02/19 职场文书
python关于集合的知识案例详解
2021/05/30 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL