jQuery ajax实现省市县三级联动


Posted in Javascript onMarch 07, 2021

本文我们用Jquery,ajax,做一个省,市,县的三级联动:

下面是我做三级联动下拉的步骤以及逻辑

第一步:先做一个省市区表格
第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法
第三步:写封装方法用JS
第四步:做个纯php处理页面,这个页面处理传过来的任何代号

首先我们要建立数据库:

jQuery ajax实现省市县三级联动

这就是包含省,市,县的数据库。

下面我们就写主页面:sanji.php:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <script src="jquery-1.11.2.min.js"></script>
 <script src="sanjiliandong.js"></script>
</head>
<body>
 <div id="sanjiliandong">
  <!--在这里使用三级联动插件-->
 </div>
</body>
</html>

然后就是js文件:

// JavaScript Document
$(document).ready(function(e){
 //向div里面仍三个下拉
  var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
 $("#sanjiliandong").html(str);//三个下拉显示
    
  
 //当省选中的话市也会跟着变去也会变。市和区都会加载一遍
 FillSheng();//省
 FillShi();//市
 FillQu();//区
 //给省加点击事件
 $("#sheng").change(function(){
   FillShi();//市
   FillQu();//区
  })
 //给市加点击事件
 $("#shi").change(function(){
   FillQu();//区
  })
});
//做三个方法分别为省市区
//填充省的方法,如何在表里查询 出省的代号例如:北京0001、天津0001,中国下面所有省都是0001开头的
function FillSheng()
{
 var pcode = "0001";
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
   var hang = data.split("|");
   
   var str = "<option value='' >请选择地区</option>";
   //把行的数组遍历下用for循环...length长度
   for(var i=0;i<hang.length;i++)
   {
    //把行的索引i在拆下.列与列的分隔符再拆
    var lie = hang[i].split("^");//这是列的数组
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    
    $("#sheng").html(str);
   }
  }
 });
}
//填充市的方法
function FillShi()
{
 var pcode = $("#sheng").val();
 $.ajax({
  async:false,//****
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
   var hang = data.split("|");
   
   var str = "<option value='' >请选择城市</option>";
   //把行的数组遍历下用for循环...length长度
   for(var i=0;i<hang.length;i++)
   {
    //把行的索引i在拆下.列与列的分隔符再拆
    var lie = hang[i].split("^");//这是列的数组
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
   }
   $("#shi").html(str);
  }
 });
}
//填充区的方法
function FillQu()
{
 var pcode = $("#shi").val();
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
   //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
   var hang = data.split("|");
   
   var str = "<option value='' >请选择乡县</option>";
   //把行的数组遍历下用for循环...length长度
   for(var i=0;i<hang.length;i++)
   {
    //把行的索引i在拆下.列与列的分隔符再拆
    var lie = hang[i].split("^");//这是列的数组
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    
    $("#qu").html(str);
   }
  }
 });
}

之后是查询数据库的处理文件:

<?php
 //处理页面只有一个功能处理传过来的所有代号(省、市、区。。。)
 include("DBDA.class.php");
 $db = new DBDA();
 $pcode = $_POST["pcode"];//取到赋值代号
 $sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

显示效果如下:

jQuery ajax实现省市县三级联动jQuery ajax实现省市县三级联动

这就是我们要做的省,市,县的三级联动。在这里我们重点强调一下一定要做好逻辑关系,想好了在去动手写代码,要不然容易混乱,这样的话就只能从头开始。

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

Javascript 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
实例浅析js的this
Dec 11 Javascript
js实现微博发布小功能
Jan 12 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
Javascript前端经典的面试题及答案
Mar 14 #Javascript
layer弹出层框架alert与msg详解
Mar 14 #Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 #Javascript
利用js定义一个导航条菜单
Mar 14 #Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 #Javascript
使用BootStrap实现标签切换原理解析
Mar 14 #Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 #Javascript
You might like
PHP 安全检测代码片段(分享)
2013/07/05 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python读写文件基础知识点
2019/06/10 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
美国购物网站:Clickhere2shop
2021/01/28 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
自荐书模板
2013/12/15 职场文书
个人自我评价分享
2013/12/20 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
法人授权委托书
2014/04/03 职场文书
教师聘用意向书
2015/05/11 职场文书
初中团委工作总结
2015/08/13 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js