封装一个三级联动，就可以在任何页面进行引用了

先写个页面引用一下这个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的三级联动下拉菜单的更多相关文章

  1. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  2. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  3. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  4. js原生实现三级联动下拉菜单

    js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  5. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  6. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  7. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  8. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  9. 用jsp实现省市区三级联动下拉

    jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...

随机推荐

  1. extjs中，datefield日期，点击输入框弹出日期，禁止手动输入

    之前用readonly:true连日期也选不了了,editable:false也不行,最后用事件监听实现 栗子如下: { xtype: 'datefield', fieldLabel: '创建结束时间 ...

  2. JAVA 程序发布引发性能抖动

    发布或重启线上服务时抖动问题解决方案 一.问题描述       在发布或重启某线上某服务时(jetty8作为服务器),常常发现有些机器的load会飙到非常高(高达70),并持续较长一段时间(5分钟)后 ...

  3. 【Python之路】第十一篇--CSS

    css CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css的四种引入方式 1.行内式 行内式是在标记的 ...

  4. react使用map生成的元素，key的设定不对导致每次删除都删除最后一个

    假设 你的key设置为map中的索引,假设为0,1,2(原dom树),现在你用splice删除掉1,重新渲染时,还是会按map索引按顺序渲染为0,1(新dom树),由于react渲染机制是比较的key ...

  5. drupal中使用jquery&ajax

    不说了,直接上代码,看注释吧: <!--drupal中使用jquery的方法,有三个不同之处 --> <script> (function($){//1.$符号不放在最外边了 ...

  6. 将可执行exe文件注册成windows服务

    要把应用程序添加为服务,你需要两个小软件:Instsrv.exe和Srvany.exe.Instsrv.exe可以给系统安装和删除服务,Srvany.exe可以让程序以服务的方式运行.这两个软件都包含 ...

  7. Convert a byte[] array to readable string format. This makes the "hex" readable!

    /* * Java Bittorrent API as its name indicates is a JAVA API that implements the Bittorrent Protocol ...

  8. Jmeter组件介绍

    测试计划:一次性能测试的相关功能用例集. 测试计划--线程组添加:

  9. 查看源码利器之sublime text 3 配置 Ctags 插件

    最近在看源码的时候发现sublime text 3是很给力的一款软件,小巧精致,这里着重讲解一下Ctags协助编译和跟踪函数 一.安装Package Control (如果Preferences &g ...

  10. linux下串口通信与管理

    linux下的串口与windows有一些区别,下面将介绍一下linux下串口通信管理 查看是否支持USB串口: #lsmod | grep usbserial 如果没有信息:sudo apt-get ...