<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. Windows和Linux下Mysql 重置root 密码

    Windows系统下一:进入Windows窗口cmd命令行下,停止mysql服务: net stop mysql二:进入mysql的安装目录下,进去bin目录mysqld-nt.exe --skip- ...

  2. css3干货

    CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分 ...

  3. 启动hadoop报ERROR org.apache.hadoop.hdfs.server.namenode.FSImage: Failed to load image from FSImageFile

    不知道怎么回事,今天在启动集群时通过jps查看进程时始终有一个standby namenode进程无法启动.查看日志时报的是不能加载fsimage文件.日志截图如下: 日志报的很明显了是不能加载元数据 ...

  4. LtUpload上传组件

    <?php/** * The Upload class * @author Alex Lee <iuyes@qq.com> * @license http://opensource. ...

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

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

  6. VS2013+Qt5.6+VSaddin1.2.5

    1 下载Qt(1)Qt安装包http://download.qt.io/official_releases/qt/(2)Qt插件http://ftp.jaist.ac.jp/pub/qtproject ...

  7. openSUSE13.1安装时要注意的问题(未完待续)

    1.最好用官方给的imageWriter来写镜像,不要用UltraISO来写镜像,会导致安装Kaffein包错误(:)可能也会有别的错误),后来我用imageWriter写了之后就没有在安装时报错了

  8. Power of Four

    Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...

  9. 【J2EE】Hibernate

    Hibernate是面向Java环境的对象/关系数据库映射工具,管理Java应用和数据库之间的映射关系,提供数据查询和获取数据的方法,可以大幅减少使用JDBC处理数据持久化的时间. 使用Eclipse ...

  10. Python: 迭代器与生成器小结

    迭代器与生成器的区别: 1. 迭代器由Class对象创建. 生成器由包含yield表达的Function对象或者Generator Expression创建. 2. 迭代器的原理: (1)由Itera ...