<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. Observer

    #include <iostream> #include <list> using namespace std; #define DESTROY_POINTER(ptr) if ...

  2. eclipse 中maven项目右键没有maven菜单问题

    修改项目.project文件,确保有maven2Builder和maven2Nature2个标签: <?xml version="1.0" encoding="UT ...

  3. jquery的上传控件uploadly,每行都有一个这样的控件对id选择器的使用

    1.先看看预览图 这个是我的页面,其中如果我没点击添加一行的时候,会把本来有的数据进行循环出来,这个时候每个记录都必须有个上传图片的按钮,但是jquery的uploadly这个控件只是锁定id的,至少 ...

  4. 【转】IE11的变化

    1.navigator.userAgent中不再包含“MSIE”关键字 2.用javascript的判断是否是IE11的方法是: var isIE11 = (sUserAgent.toLowerCas ...

  5. ElasticSearch部署

    安装jdk1.7 1.卸载Liunx自带的openjdk rpm -qa | grep jdk 查看当前的jdk版本 sudo yum -y remove java-1.7.0-openjdk-hea ...

  6. Java 连接MongoDB

    1.驱动 通过java连接MongoDB需要一个java版的驱动 下载地址:http://mongodb.github.io/mongo-java-driver/ 2.连接MongoDB 通过 com ...

  7. 复习URLHttpConnection方式GET，POST方式链接网络解析uri

    xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  8. 关键字替换排除HTML标签属性字符

    解决办法: 1.打开文件e/class/functions.php 2.找到函数 ReplaceKey($newstext,$classid=0) 3.找到替换代码 if(STR_IREPLACE) ...

  9. Delphi XE5 for android 调用Java类库必看的文件

    C:\Program Files\Embarcadero\RAD Studio\12.0\source\rtl\android 的目录 Androidapi.AppGlue.pasAndroidapi ...

  10. python学习第二天第一部分

    备注:写程序不能写重复性的代码 学习内容:数据类型.for循环.while循环.字符编码.文件处理 一.for循环 1.简单的for循环 for i in range(10): # 此处意思为:循环r ...