php+ajax的三级联动下拉菜单
封装一个三级联动，就可以在任何页面进行引用了
先写个页面引用一下这个js
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级联动</title>
<script src="../jquery-1.11.2.min.js"></script> //引入的jQuery的包
<script src="sanjiliandong_fengzhuang.js"></script> //引入下面的写的三级联动的封装js
</head> <body>
<div id="sanji">
//引用的三级联动js
</div>
</body>
1.首先是页面加载完成后才运行，所以要在开头写上
$(document).ready(function(e) {
//写入方法
});
可以先将省、市、区的方法名写出
//填充省的方法
function FillSheng()
{
//方法的功能
}
//填充市的方法
function FillShi()
{
//方法的功能
}
//填充区的方法
function FillQu()
{
//方法的功能
}
2.先考虑下下拉菜单的逻辑，先不着急写功能：页面加载完成后是要三个下拉菜单，菜单的元素是select，为每一个菜单起个名字，利于写方法时使用
var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; //三个下拉菜单项
$("#sanji").html(str); //将菜单交个要使用这个封装的页面的div中
3.在执行时是依次显示省、市、区，然后可以将方法写入（1中）的注释处
FillSheng(); //填充省的方法
FillShi(); //填充市的方法
FillQu(); //填充区的方法
4.三个菜单项是联动的，也就是根据省的不同可以有不同的选项
可以对下拉菜单项加事件，这里不用单击事件，可以用改变事件change（）
（1）点击省，市和区都改变显示
$("#sheng").change(function(){ //改变省，下面的市和区显示
FillShi();
FillQu();
})
（2）点击市，就区改变显示
$("#shi").change(function(){ //这里就是改变区的
FillQu();
})
这样，对于逻辑也就是上面的解释，下面就是对每个方法写功能了
5.填充省的方法
这就要根据表中的信息了，我的表中是这样的：
不难看出规律，地区的代号和父级代号能看出，通过11---父级的11，也就是通过省能找到相应的市；然后通过1101---父级的1101，也就是通过市能找到相应的区
省中只有一个中国中的省，那么直接定义一个代号是“0001”，然后通过AJAX进行遍历数据库找出属于中国的省
function FillSheng()
{
var pcode = "0001"; //定义的代号是0001
$.ajax({
async:false, //默认是同步的，false是异步进行
url:"sanjiliandong_chuli.php", //处理数据的处理页面
data:{pcode:pcode},
type:"POST", //数据传输方式
dataType:"TEXT",
success: function(data){
//处理页面结束后执行的代码
}
});
}
数据的处理页面：
<?php
include("DBDA.class.php"); //调用封装好的数据库
$db = new DBDA(); //造新对象 $pcode = $_POST["pcode"]; //取出传过来的值 $sql = "select * from chinastates where parentareacode='{$pcode}'"; //找出父级代号等于传过来的值得全部信息 echo $db->StrQuery($sql); //执行代码，转换为字符串类型：封装的转变方式在上一篇随笔中写过一遍
处理页面执行结束之后，在ajax方法中的成功后的方法中写入结束之后的语句
因为是字符串，所以要拆分，行列都要拆封，并且将结果给省的下拉菜单中
var hang = data.split("|"); //拆分行，根据“|”
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^"); //拆分列，根据“^”
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; //显示索引是1的也就是名称那一列，菜单项的值是表中的地区代号那一列
}
$("#sheng").html(str); //结果放入省的下拉菜单
执行引用js的页面走起效果： 
6.填充市和区的方法
它的编写和省差不多，处理页面也是一样的，不同的就是传输的值
//填充市的方法
function FillShi()
{
//方法的功能，除了这两项不一样，其他的都一样
}
在市菜单中定义一个填充省的值，最后遍历结束时，将值写入市的下拉菜单中
var pcode = $("#sheng").val(); //将省的值在市中
在写完ajax的遍历结束时，值写入市的下拉菜单
$("#shi").html(str);
//填充区的方法
function FillQu()
{
//方法的功能，除了这两项，其他的都没变过
}
区就是定义一个填充的市的值，最后遍历时，将值写入区的下拉菜单中
var pcode = $("#shi").val(); //将市值定义在区中
在写完ajax的遍历结束时，值写入区的下拉菜单
$("#qu").html(str);
最后的效果就是改变一个下拉菜单，市和区的下拉菜单都变
php+ajax的三级联动下拉菜单的更多相关文章
- ajax 实现三级联动下拉菜单
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
- JQ与AJAX 省市区三级联动下拉框
用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...
- js原生实现三级联动下拉菜单
js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
- PHP用ajia代码写三级联动下拉
下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- 用jsp实现省市区三级联动下拉
jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...
随机推荐
- SpringFramework_module
org.springframework : spring-aop:基于代理的AOP spring-aspects:基于切面的AspectJ spring-beans:beans spring-cont ...
- Codeforces Round #346 (Div. 2) A Round-House
A. Round House 题目链接http://codeforces.com/contest/659/problem/A Description Vasya lives in a round bu ...
- Linux 网络性能tuning向导
本文的目的不完全在于提供调优信息,而是在于告诉读者了解Linux kernel如何处理数据包,从而能够在 自己的实践中发挥Linux 内核协议栈最大的性能 The NIC ring buffer 接收 ...
- 使用SQL Server视图的优缺点
SQL Server视图我们经常会用的到,下面就为您介绍使用SQL Server视图的优缺点,希望可以对您SQL Server视图有更多的了解. 在程序设计的时候必须先了解视图的优缺点,这样可以扬长避 ...
- Error js内置错误 js处理错误流程 Throw语句
Exceptional Exception Handling in JavaScript MDN资料 Anything that can go wrong, will go wrong. ...
- Mac下配置Maven环境变量
Mac下配置Maven环境变量 1.先到Apache官网下载maven压缩包.下载地址:http://maven.apache.org/download.cgi 2.Maven是用Java开发的,所以 ...
- Windows下WordPress搭建博客过程
搭建环境:Win7 + XAMPP5.5 + wordpress4.5.1 官网下载安装包,解压,拷贝到网站根目录(D:\IT\XAMPP5.5\htdocs\),重命名为blog(随意) 创建数据库 ...
- CentOS6.3配置SVN之subversion1.7.7
今天配置了 SVN 记在这儿 备忘: 1. 下载 svn 软件包和依赖包 cd /mydata/soft wget http://labs.mop.com/apache-mirror/subversi ...
- Ninja：Java全栈Web开发框架-Ninja中文网
相信不少业界人士都还停留在SSh的时代 其实我想给大家推荐的一个轻量级框架那就是Ninja; Ninja是一个Java全栈Web开发框架,稳定.快速.非常高效. 商业价值 在你的下一个项目中,Ninj ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...