// JavaScript Document
$(document).ready(function(e) {
//找到ID=SANJI的DIV,造三个下拉扔进去
var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
$("#sanji").html(str);
//加载省的数据
Hsheng();
//加载市的数据
Hshi();
//加载区的数据
Hqu();
//给省的下拉加点击事件
$("#sheng").click(function(){
Hshi();//重新加载市
Hqu();//重新加载区
});
$("#shi").click(function(){//给市的下拉加点击事件
Hqu();//重新加载区
});
});
function Hsheng(){//加载省份的方法
var code="0001";
$.ajax({
url:"shicl.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("-");
str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#sheng").html(str);
}
});
}
function Hshi(){//加载市的方法
var code=$("#sheng").val();//找市的父级代号
$.ajax({
url:"shicl.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("-");
str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
function Hqu(){//加载区的方法
var code=$("#shi").val();//找区的父级代号
$.ajax({
url:"shicl.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("-");
str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
});
}

用jQuery,ajax,实现三级联动封装JS的文件的更多相关文章

  1. ASP.NET webform基于Jquery,AJAX的三级联动

    主要html代码 <select id="province"> <option value="0">--请选择省份--</opti ...

  2. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  3. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  4. JQuery+Ajax实战三级下拉列表联动(八)

    本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...

  5. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  6. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理(在线下单)

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  7. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  8. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  9. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

随机推荐

  1. ZOJ-3662 Math Magic 背包DP

    这题不错,可惜我还是太弱了,没想到qwq. 看了网上大佬题解之后写的,对比了一下代码,好像我写的还是挺简洁的(逃,只是吞行比较多). 因为直接用lcm的值做下标会超时,所以我们观察发现可以组成lcm为 ...

  2. eclipse 彻底修改复制后的项目名称

    1.项目右键 --> properties --> Web Project Settings --> 修改Context root 2.web.xml 3.工作空间中找到当前项目下. ...

  3. mongodb 可视化工具

    mongodb是用命令行输入的,有些人可能不太习惯,我自己找了下mongodb的一些可视化工具,发现了一款adminmongo很好用,这里介绍给你们用一下. github地址:https://gith ...

  4. 初试avalon

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. qt中使用sqlite存储数据

    一.sqilte的安装 在Windows上安装SQLite: 请访问 SQLite 下载页面,从 Windows 区下载预编译的二进制文件. 您需要下载 sqlite-tools-win32-*.zi ...

  6. hdu1848 Fibonacci again and again [组合游戏]

    http://acm.hdu.edu.cn/showproblem.php?pid=1848 Problem Description 任何一个大学生对菲波那契数列(Fibonacci numbers) ...

  7. 前台页面中json和字符串相互转化

    比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象: var a={"name":"tom","sex":"男&quo ...

  8. Ext 消息框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. XMPP的总体架构和Jabber ID

    通常XMPP的架构用C/S来实现,但是也并不是强制的,Client和Server,Server和Server之间通过TCP连接来通信. 架构的简单示意图如下: C1-----S1----S2----C ...

  10. Ubuntu下安装Samba服务器

    闲来无聊尝试自己安装下Samba服务器,使本机和虚拟机可以无障碍传输文件(虽然用VMwaretools可传,但总感觉麻烦,而且速度欠佳) 首先,同安装qemu一样,在安装之前要确定你的系统apt列表已 ...