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

先写个页面引用一下这个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. jQuery基础与常用方法学习笔记

    JQ与JS的关系:可以共存,不可混用.jq源码,源生JS面向对象写的   JQ写法 链式操作 $(‘#div’).html(‘hello’).css().click() 赋值取值合体 .html(‘h ...

  2. Webgis中关于Openlayers入门使用(一)安装及生成基本地图

    一.WebGis项目中使用的版本2.12 下载地址:https://github.com/openlayers/ol2/releases https://github.com/openlayers/o ...

  3. OOP的字段

    <?php class Archie{ //字段成员声明格式:修饰符 变量名 [=xxx] public $_name='Archie!'; //public表示共有,类外可以访问 public ...

  4. 优秀代码要求(转自http://www.cnblogs.com/brishenzhou/p/6284188.html)

    一段优秀的代码,它一般需要满足以下几个条件: #统一规范# 所有的代码,第一前提必须是统一规范,而常见的统一规范主要包括有以下内容: 1)统一编辑器规范 在团队开发中,我们并不对各个开发人员使用的编辑 ...

  5. php 分析

    php  code in D:\10\11\php test in D:\10\11\php\test issue 1: <html><head><title>标记 ...

  6. python修炼6

    文件操作 注:不能把open语句放在try块里,因为当打开文件出现异常时,文件对象file_object无法执行close()方法. 1.打开文件 (相当于桌面的快捷方式)f=open(文件名,模式默 ...

  7. .net 中HttpClient 携带cookie传输

    CookieContainer cookieContainer = new CookieContainer(); Cookie cookie = new Cookie("username&q ...

  8. 谷歌Dremel即时数据分析解决方案

    Hadoop技术已经无处不在.不管是好是坏,Hadoop已经成为大数据的代名词.短短几年间,Hadoop从一种边缘技术成为事实上的标准.看来,不仅现在Hadoop是企业大数据的标准,而且在未来,它的地 ...

  9. Bullcow 牡牛和牝牛(bzoj 3398)

    Description     约翰要带N(1≤N≤100000)只牛去参加集会里的展示活动,这些牛可以是牡牛,也可以是牝牛.牛们要站成一排.但是牡牛是好斗的,为了避免牡牛闹出乱子,约翰决定任意两只牡 ...

  10. 5-jQuery - AJAX get()/post()页面请求即执行

    get 前台页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...