三级联动（ajax）
<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）的更多相关文章
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- AJAX 三级联动
新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- 完整的Ajax及三级联动小练习
Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...
- Ajax案例：三级联动查询员工的信息(三张表进行内连接)
需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- 基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- Ajax实现三级联动(0520)
查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...
- 移动端纯原生JS不依赖ajax后台服务器实现省市县三级联动
最近好多天没有更新文章,是因为公司的项目忙的不行.今天有点时间,就突然想起在移动端项目中遇到三级联动的问题,网上查了很多资料,都是依赖各种插件,或者晦涩难于理解.于是,自己决定写一个出来. 当然,没有 ...
- php+ajax的三级联动下拉菜单
封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...
随机推荐
- ADO.NET中ExcuteNonQuery获取存储过程Return返回值
/// <summary> /// 获取当月用户已投票数量 /// </summary> /// <param name="userId">用户 ...
- 使用mitmf 来绕过HSTS站点抓取登陆明文
使用mitmf 来绕过HSTS站点抓取登陆明文 HSTS简介 HSTS是HTTP Strict Transport Security的缩写,即:"HTTP严格安全传输".当浏览器第 ...
- Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.
问题提示:Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace. ...
- C# 调用系统API 内核 简单样例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- Python之路-（三级菜单）
data = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家':{}, 'youk ...
- MVC中用ajax提交json对象数组
应用场景:在前端用ajax向服务器提交json对象数组,在controller的以对象数组作为函数的参数,提交的json数组直接转为服务器端的对象数组. 如: 要将json对象数组[{Id:1,Nam ...
- 菜鸟学习Spring——60s配置XML方法实现简单AOP
一.概述. 上一篇博客讲述了用注解的形式实现AOP现在讲述另外一种AOP实现的方式利用XML来实现AOP. 二.代码演示. 准备工作参照上一篇博客<菜鸟学习Spring--60s使用annota ...
- linux kernel 0.11 setup
setup作用 ①读取参数放在0x90000处. ②将原本在0x10000处的system模块移至0x00000处 ③加载中断描述符表,全局描述符表,进入32位保护模式. 概念 关于实模式和保护模式区 ...
- 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统 ：1.技术简介之Mina连接
欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 Apache MINA(Multipurpose Infrastructure for Network Applic ...
- netfilter
http://jingyan.baidu.com/article/642c9d3415d2c9644a46f7c6.html http://blog.csdn.net/zhangskd/article ...