<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. JS限定手机版中图片大小随分辨率自动调整

    <script type="text/javascript"> var ObjImg = jQuery(".Dy_Content img"); fo ...

  2. 导出数据库数据制成Excel和txt

    引用ICSharpCode.SharpZipLib.dll 1.编写压缩和解压代码 using System; using System.Collections.Generic; using Syst ...

  3. WinForm中为按钮添加键盘快捷键，超简单，亲测有效

    博主并没有多少Windows平台下程序的开发经验,一年前使用过MFC设计过一个指纹识别系统的页面,后来就没有使用过几次.现在C#课程实验要求实现一个简易计算器,为了便于快速录入数据,使用键盘会比使用鼠 ...

  4. Java垃圾回收基础

  5. php字符串截取问题

    希望将一个字符串限长显示,如果该字符串超过一定长数,就截取前n个字符,后加省略号. 但是在英文和汉字混合的情况下会出现如下问题: 如果有这样一个字符串  $str="这是一个字符串" ...

  6. php中的一些小细节（1）

    <?php $a=false; echo $a; //var_dump($a); ?> 输出结果为:     (即为空): 为什么会这样子? 查看官网对echo的相关资料得出: 结论:ec ...

  7. Microsoft Visual C++ Runtime error解决方法

    1: 当出现下图时提示Microsoft Visual C++ Runtime error 2:此时不要关闭该对话框,然后打开任务管理器(Ctrl+Shift+Esc)如下图: 找到Microsoft ...

  8. Java 第一天

    环境变量设置(以JDK1.7为例) CLASSPATH=.\;C:\Program Files\Java\jdk1.7.0_45\lib\dt.jar;C:\Program Files\Java\jd ...

  9. 网络开发库从libuv说到epoll

    引言 这篇博文可能有点水,主要将自己libuv的学习过程和理解. 简单谈方法. 有点杂. 那我们开始吧. 首先介绍 githup . 这个工具特别好用. 代码托管. 如果不FQ可能有点卡. 但是应该试 ...

  10. object sender ,EventArs e

    引用:http://blog.csdn.net/kongbai308416350/article/details/4233786 说的通俗一些,就是: 有一个叫做EventHandler 的家伙,他会 ...