（jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14
首先，要实现如下图效果，
1、要理清思路：
先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。
2、用到的数据库表：Chinastates表
规律：根据国家级（中国）的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>
//引入jquery包
<script src="../jquery-1.11.2.min.js"></script>
//引用我们自己封装的js文件
<script src="sanji.js"></script>
</head>
<body>
//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+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14的更多相关文章
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
- 【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- JQuery+Json 省市区三级联动
一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...
- 用php+mysql+ajax+jquery做省市区三级联动
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...
- jquery全国省市区三级联动插件distpicker
使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...
- 用jQuery,ajax,实现三级联动封装JS的文件
// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "< ...
- JQ与AJAX 省市区三级联动下拉框
用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...
- js&&jQuery实现省市区三级联动
代码参考了:https://codepen.io/anon/pen/WzyNQB;根据自己的需要修改了一下,挂个出处 1.前端页面代码 <html> <head> <me ...
随机推荐
- iOS 将对象的属性和属性值拆分成key、value，通过字符串key来获取该属性的值
这篇博客光看标题或许就会产生疑问,某个对象,只要它存在某个属性,且值不是空的,不就能直接用点方法获取吗,为什么要拆分成key和value多此一举呢?下面,我用一个例子告诉大家,既然这方法是存在的,那就 ...
- Nagios监控远程主机
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; line-height: 150%; fon ...
- NPM使用技巧
如果你是一个JavaScript系的开发者,一定不会陌生NPM,它既是一个平台,也是一个工具.在这个平台上,我们能够使用其他开发者提供的功能代码,当然我们也能将我们自己代码提交到这里分享给世界上的开发 ...
- 老李分享：Web Services 组件 1
老李分享:Web Services 组件 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...
- MongoDB基础教程系列--第六篇 MongoDB 索引
使用索引可以大大提高文档的查询效率.如果没有索引,会遍历集合中所有文档,才能找到匹配查询语句的文档.这样遍历集合中整个文档的方式是非常耗时的,特别是处理大数据时,耗时几十秒甚至几分钟都是有可能的. 创 ...
- Windows入门基础：1.关于CreateWindow（）函数使用中遇到的问题
我在实现显示窗口的程序中,遇到一个问题:首先程序没有任何语法错误,编译能够通过,但是就是不能弹出窗口. 后来在MSDN中查询CreateWindow()函数,发现了下面这句话: "If lp ...
- JavaScript变量相关问题
本文重在探讨JavaScript变量包含的两种不同数据类型的值--基本类型值和引用类型值的区别.在此外稍微带过ECMAScript和JavaScript的关系. 题为JavaScript变量,但更具体 ...
- 【HDOJ 1286】找新朋友
找新朋友 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submissi ...
- PHP的laravel框架后台实现数据导出excel的功能
要想在PHP后台实现excel导入导出功能,一种简单有效的方法就是使用phpexcel插件. 要使用phpexcel插件,首先需要下载composer,这个工具是专门用来管理项目中库之间的依赖关系的. ...
- Linux - 进程间通信 - 命名管道
1.命名管道的特点: (1)是管道,可用于非血缘关系的进程间的通信 (2)使用命名管道时,梁金成需要用路径表示通道. (3)命名管道以FIFO的文件形式存储于文件系统中.(FIFO:总是按照先进先出的 ...