<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>三级联动</title>

 <script src="../jquery-1.11.2.min.js"></script>

 <!--三级联动是ajac来实现-->

 </head>

 <body>

 <div id="sanji"></div><!--三个下拉列表--><!--把div放在这是因为，以后可以拿到别的地方使用，这就是就是一个JS的插件-->

 </body>

 <script type="text/javascript">

 $(document).ready(function(e) {

    //要实现三级联动，需要三个下拉列表，怎样实现？？？？？

    //定义一个字符串，  写三个下拉<select> ,第一个下拉是存放省的，第二个下拉是存放市的，第三个是存放的区的

   var zhuti="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";

  // aler(zhuti);

   //做了三个< select>，把这三个< select> 放到  <div id="sanji"></div>里

     //怎么放？？

     //根据ID，找到DIV"#sanji"

     $("#sanji").html(zhuti);

     //把三个下拉放到的DIV里,div<div id="sanji"></div>里有三个下拉了

     //页面在加载时，把这三个select放到DIV里，第一个select里要填充内容，省填充完之后，要填充市，市填充完之后,在填充区。

     //填充省   下拉，先要做成一个方法

     FillSheng();  //调用这个方法就可以填充上

     //填充市   下拉

     FillShi();  //执行这个方法就把市填充上了

     //填充区   下拉

     FillQu();  //

 //页面在加载时，先把这三个下拉都填上值

 //当省选中项变化的时候,市和区要跟这变

  //要给省的下拉，加一个事件

  //根据id找到省，加一个事件，加一个.change()事件

     $("#Sheng").change(function(){  //当省选中变化的时候去填充市和区，当省选中变化的时候,后面的市和区都跟这变，跟着变的话，这调用FillShi()方法和FillQu()方法，就可以了

     //当省选中项变化的时候，再重新填充，市和区，

         //填充市

         FillShi();

         //填充区

         FillQu();

     })

         //当市选中变化时候去填充区，因为区要跟着市变化，所以这个位置，给谁加事件？？？给市shi的下拉加一个.change()事件，这里面写填充区的代码

         $("#Shi").change(function(){

         //填充区

         FillQu();

             })

 });

 //把三个方法写好之后，就可以了

 //填充省的方法

 //如何从表中查到所有的省，每一个省的负级代号都是一样的，都是属于中国的，每一个省的负级代号都是0001，根据0001来查询，就可以查到所有省的信息

 function FillSheng()

 {   //省的父极代号

     var pcode = "0001";//定义的变量，pcode是负极代号。所有省的负极代号都是0001

     //根据负级代号查到所有的省

     //调.ajax 查

     //aler(pcode);

     $.ajax({



     url:"chili.php",

     date:{pcode:pcode},

     type:"POST",

     dataType:"TEXT",

     success: function(data){  //success: 回调函数  返回值是data

     //aler(data);

     <!--返回的是字符串，需要对字符串进行处理-->

     //拆分返回的字符串，得到行的数组

     var hang = data.trim().split("|");  //返回hang的数组

     // Trim()删除字符串首尾的空白（可以首尾一起，也可以指定首或尾，取决于控制参数），但会保留字符串内部作为词与词之间分隔的空格。

     //split（）拆分。本函数可将字符串依指定的规则分开。先根据行与行之间的分割，过来拆。

     //拆完之后，会返回一个行的数组。变量hang var hang来接收。

     //这个行的数组里面每一项都存了，一个字符串，拆分每一行，需要先取到，字符串，取到字符串就要用循环

     var str = "" ;//拼一个字符串，默认是空的

     for(var i=0;i<hang.length;i++)

     {

         //返回列的数组

         var lie = hang[i].split("^");///通过hang取索引i，能够取到这一行里的字符串，这个字符串的每一列之间用哪一个符号分割了。

         //在根据列与列之间的分割符，过来拆一下，列于列之间是用，"^"分割的

         //在这个循环里，每循环一次，就可以造一个<option>，然后拼到上面

         str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";//再往后拼上一个，字符串（<option></option>），<option>里面要显示，省份的信息，要显示省的名称应是索引为1的"+lie[1]+",能够取到名称

     }

         $("#sheng").html(str);

     }

     });

 }

 </script>

 </html>

处理页面-------"chili.php"

 <?php

 include("DBDA.php");

 //造对象

 $db=new DBDA();

 //传过来一个负级代号，所以这个页面，需要接收这个负级代号

 //负级代号，存在$_POST的数组里，找到pcode的存起来$pcode

 $pcode=$_POST["pcode"];//接收负级代号

 //根据负级代号查询  ParentAreaCode是负级代号  传过来的负级代号是$pcode

 $sql="select * from chinastates where ParentAreaCode='{$pcode}'";

 //根据这条语句，能够根据负级代号，查到所有的省会信息，查到所有的省会信息之后执行

 echo $db->StrQuery($sql);//返回字符串，就包含了所有的信息

 //这个页面就是，给你一个负级代号，就查出子级区域，然后用字符串返回

 ?>

PHP----练习-----三级联动的更多相关文章

  1. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  2. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  3. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  4. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  5. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  6. webForm（三）——三级联动

    三级联动 首先附图一张,初步认识一下什么是三级联动:                           注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...

  7. C#三级联动

    1.运用ComboBox的控件建立效果,如右图: 2.建立三个表,第一个Province表: PID,PName;第二个为city表: CId,CName,PId;第三个为coun表:CounID,C ...

  8. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  9. easyUI下拉列表三级联动

    首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据 例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...

  10. JavaScript 三级联动

    附件连接下载地址:http://files.cnblogs.com/files/CaktyRiven/js.zip <!DOCTYPE html> <html lang=" ...

随机推荐

  1. Gradle sync failed: Cannot set the value of read-only property 'outputFile'

    错误 Gradle sync failed: Cannot set the value of read-only property 'outputFile' 原因 gradle打包,自定义apk名称代 ...

  2. 十 DatagramChannel

    DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChannel 下面是 Dat ...

  3. Jupyter 常用快捷键 及 常用方法笔记

      两个不同的cell有上下的关系, 不是完全独立的, 下图可以看出下面的res是引用上面的   保存节点        就像虚拟机的快照与恢复 回到节点 保存文件 s(快捷键)        实际写 ...

  4. CentOS下调整home和根分区大小

    由于我们有时候没法预估或者说错误的盘符分区的时候,常常会导致我们后面的操作出现极大的不方便,这里我就记录下一个错误分区后对home和根分区存储空间大小调整的整个过程! ①查看我们现有机器的分区状况 c ...

  5. Android recyclerview删除item刷新列表

    删除item坑 mModels.remove(i); notifyItemRemoved(i); //必须调用这行代码 notifyItemRangeChanged(i, mModels.size() ...

  6. Javascript之DOM的三大节点及部分用法

    DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操 ...

  7. 初学Git和Github

    一开始看到老师的作业,出于好奇打开看了一下教程链接,一脸懵逼.What is this???然后慢慢了解,自己百度琢磨这个陌生的git,Git是一款免费.开源的分布式版本控制系统.Github是一个代 ...

  8. IIS6.0配置正常，但是显示“网页无法访问”，Httperr.log中显示全是“Connections_refused”，问题总结

    转自:http://blog.csdn.net/foxeatapple/article/details/21983869 最近部门的Web服务器突然无法访问! 加班解决! 问题症状: 1.“Inter ...

  9. 千里之堤毁于蚁穴（慎用HD Wallets）

    转自:http://blog.sina.com.cn/s/blog_12ce70a430102vbu9.html 千里之堤毁于蚁穴(慎用HD Wallets) -- 随机系列谈之四 现在我们都该明白, ...

  10. SQL点点滴滴_常用函数

    该文章转载自http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 别人的总结,很详细. 以下所有例子均Studnet表为例 ...