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.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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个人网站架设连环讲(二)
2006/10/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
python 队列详解及实例代码
2016/10/18 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
小学生田径运动会广播稿
2014/09/11 职场文书
财务会计实训报告
2014/11/05 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
干部考察材料范文
2014/12/24 职场文书
初一英语教学反思
2016/02/15 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android