<body>

<div id="zhuti"></div>

</body>
<script type="text/javascript">
$(document).ready(function(e) {
　　//建主体框架，建立三个下拉菜单，分别显示省、市、区（县）
　　var zhuti="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";

　　//将主体内容显示在页面中
　　$("#zhuti").html(zhuti);

　　//填充省表单
　　FillSheng();
　　//填充市表单
　　FillShi();
　　//填充区（县）表单
　　FillQu();

　　//当选择省时，后两个菜单中只显示相对应的市、区（县）
　　$("#sheng").change(function(){
　　//填充市表单
　　FillShi();
　　//填充区（县）表单
　　FillQu();
　　})
　　//当市被选中时，后一个菜单中只显示相对应的区（县）
　　$("#shi").change(function(){
　　//填充区（县）表单
　　FillQu();
　　})
});

//填充省的方法
function FillSheng()
{
　　//需要用到省的父级代号
　　var pcode="0001";
　　//调用AJAX方法
　　$.ajax({
　　　　async:false, //关闭异步执行，开启同步执行，默认为true，开启异步执行
　　　　url:"cxchuli.php", //引用处理页面
　　　　data:{pcode: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].trim().split("^");
　　　　　　　　//将数据进行拼接存入变量中
　　　　　　　　str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
　　　　　　}
　　　　　　//将得到的数据放到省级下拉菜单中显示
　　　　　　$("#sheng").html(str);
　　　　}
　　})
}

填充市的方法

function FillShi()
{
　　var pcode=$("#sheng").val();
　　$.ajax({
　　　　async:false, //关闭异步执行，开启同步执行
　　　　url:"cxchuli.php", //引用处理页面
　　　　data:{pcode: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].trim().split("^");
　　　　　　　　//将数据进行拼接存入变量中
　　　　　　　　str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
　　　　　　}
　　　　　　//将得到的数据，放入市级下拉菜单中显示
　　　　　　$("#shi").html(str);
　　　　}
　　})
}

//填充区（县）的方法
function FillQu()
{
　　//需要用到区（县）的父级代号
　　var pcode=$("#shi").val();

　　//调用AJAX方法
　　$.ajax({
　　　　async:false, //关闭异步执行，开启同步执行
　　　　url:"cxchuli.php", //引用处理页面
　　　　data:{pcode: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].trim().split("^");
　　　　　　　　//将数据进行拼接存入变量中
　　　　　　　　str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
　　　　　　}
　　　　　　//将得到的数据放到区（县）级下拉菜单中显示
　　　　　　$("#qu").html(str);
　　　　}
　　})
}

</script>

三级联动（ajax）的更多相关文章

  1. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  2. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  3. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  4. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  5. Ajax案例：三级联动查询员工的信息(三张表进行内连接)

    需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...

  6. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  7. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  8. Ajax实现三级联动(0520)

    查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

  9. 移动端纯原生JS不依赖ajax后台服务器实现省市县三级联动

    最近好多天没有更新文章,是因为公司的项目忙的不行.今天有点时间,就突然想起在移动端项目中遇到三级联动的问题,网上查了很多资料,都是依赖各种插件,或者晦涩难于理解.于是,自己决定写一个出来. 当然,没有 ...

  10. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

随机推荐

  1. 软件工程 speedsnail 冲刺5

    2015-5-9 完成任务:学习了黑马android教学视频10\11\12集,填写游戏人的姓名功能为明天的记分板准备: 遇到问题: 问题1 Suspicious method call; shoul ...

  2. 掌握iOS自动布局

    1,自动布局是一种基于约束的布局(constraint-based layout)引擎,它可以根据开发者在对象上的约束自动调整大小与位置. 2.在iOS 6之前使用的布局模型是“spring& ...

  3. objective-C基本知识

    预编译指令 1.自己写的头文件最好用双引号,而系统自带的可以用尖括号. ************************************************* 点语法 p.age= 10; ...

  4. 控制不能离开Finally子句主体

    1.在try{}catch{}finally{}的结构中不可以将返回语句放置在finally的主体当中2.如果在catch{}中有向上一级从新抛出异常操作,在finally{}之后的语句将不会执行 3 ...

  5. 收缩SQL数据库日志

    各位同学,相信大家在使用SQL数据库时,常常会遇到日志文件比数据库文件还在大的情况.以下有一简单的办法,可以快速的删除日志档.使用其大小变为540K. 供各位参考. DUMP TRANSACTION ...

  6. 无需server-U IIS7.5 在已有的多个WEB网站上配置FTP发布

    1 新建一个用于ftp登陆的计算机用户. 操作:开始→管理工具→计算机管理→本地用户和组→用户,新建一个计算机用户,设置好用户名和密码,例如:nenkea nkscl 2 在web站点文件夹下,把新建 ...

  7. Windows7下CHM电子书打开不能正常显示内容

    Author:KillerLegend Date:2014.1.28 Welcome to my blog:http://www.cnblogs.com/killerlegend/ 今日下载一个CHM ...

  8. Vmware下Ubuntu无法上网的问题

    本来这个挺简单的个问题,但是由于很久没有使用虚拟机并且期间实体机网络环境发生了一些变化,导致了一些麻烦. 一般用NAT就行了,就是Vmware右下角那个图标(左起第4个)设置就行. 我这么设置了还是不 ...

  9. JavaWeb之 Servlet执行过程 与 生命周期

    Servlet的概念 什么是Servlet呢? Java中有一个叫Servlet的接口,如果一个普通的类实现了这个接口,这个类就是一个Servlet.Servlet下有一个实现类叫HttpServle ...

  10. hashCode()和toString()

    hashCode函数和toString函数也在Object类中,同样,所有的类都继承了这2个函数. hashCode函数用于生成哈希码,没有参数,返回值为整型 把u的值作为键存入map中,使用get方 ...