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选择器特殊字符与属性空格问题
Aug 14 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 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
xml+php动态载入与分页
2006/10/09 PHP
php构造函数的继承方法
2015/02/09 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
js window.event对象详尽解析
2009/02/17 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
巧用canvas
2017/01/21 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
python获取从命令行输入数字的方法
2015/04/29 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python 动态加载的实现方法
2017/12/22 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python3远程监控程序的实现方法
2019/07/15 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
人力资源部经理的岗位职责
2014/03/04 职场文书
超市促销活动总结
2014/07/01 职场文书
订货会主持词
2015/07/01 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
Python字符串格式化方式
2022/04/07 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL