<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. [leetcode]_Palindrome Number

    判断integer是否为回文串(负数全部不为回文串) 思路很直接,提取出integer中的每一位,一头一尾进行比较是否相同. 一次AC , 直接上代码: public boolean isPalind ...

  2. WordPress 主题开发 - (六) 创建主题函数 待翻译

    We’ve got a file structure in place, now let’s start adding things to them! First, we’re going to ad ...

  3. 通过URLHttpConnection方式连接网络步骤，获取位图为例

    要注意的是:访问网络不能直接放在主线程,要放在另外一个线程里面,如果放在主线程会报android.os.NetworkOnMainThreadException错误1 public Bitmap ge ...

  4. [读书心得]资料分页的优化，以SQL 2012的 OFFSET-FETCH为例

    这是我的文章备份,原始出处:[读书心得]资料分页的优化,以SQL 2012的 OFFSET-FETCH为例 http://www.dotblogs.com.tw/mis2000lab/archive/ ...

  5. Redux介绍及基本应用

    一.Redux介绍  Redux的设计思想很简单,就两句话: Web应用是一个状态机,神力与状态是一一对应的 所有的状态,保存在一个对象里面 二.Redux基本概念和API Store Store就是 ...

  6. 使用RMAN验证备份的有效性

    --验证控制文件和参数文件: RMAN> restore validate controlfile; Starting allocated channel: ORA_DISK_1 channel ...

  7. UCOS2_STM32F1移植详细过程（四）

    Ⅰ.概述 上一篇文章是讲述uC/OS-II Ports下面os_cpu_a.asm.os_cpu_c.c和os_cpu.h文件底层端口代码的移植(修改)和说明,接着上一篇文章来讲述关于UCOS移植应用 ...

  8. java-servlet-jsp

    =========================servletjavax.servlet    javax.servlet.http    javax.annotation    javax.ser ...

  9. Android WIFI 启动流程

    参考:http://blog.chinaunix.net/uid-26215986-id-3260413.html 一. WIFI 工作步骤 1. Wifi模块初始化 2. Wifi启动 3. 查找热 ...

  10. Eclipse常用快捷键使用

    Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键.     1. [ALT+/]     此快捷键为用户编辑的好帮手 ...