// 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. 简单记录下Jmeter通过CSV保存测试数据,测试用例,及将测试结果导出到Excel里

    1.CSV保存测试数据,并上传到CSV Data Set Config,设置相关属性 2.CSV保存测试用例,并上传到CSV Data Set Config,设置相关属性 3.设置一个http请求,设 ...

  2. vue 使用Better-Scroll

    注意点 1. 外层容器wrapper要设置高度,并且overflow:hidden. 2. wrapper里面的需要一个div包裹所有内容 3. 样式成功 4.  以上就是可以滚动的情况,wrappe ...

  3. three.js低版本添加文字(如71版本)

    研究了半天,最后终于加载成功了,记录一下three.js 71版本的文字加载,下面开始整个过程 首先,将ttf字体转换成js文件 源码版: https://github.com/gero3/facet ...

  4. python3 投票

    import urllib.request # cd C:\Python36-32\Scripts # pip install BeautifulSoup from bs4 import Beauti ...

  5. SaaS上云工具包为企业应用构筑上云之梯

    导语:本文中,阿里云资深技术专家郑刚将聚焦SaaS上云工具包如何帮助企业上云,包括产品上云.商品上市.服务上心,讲述了SaaS上云工具包为客户和伙伴提供的价值.在SaaS上云工具包整体解决方案的帮助下 ...

  6. 小程序解析HTML5

    最近做项目的时候碰到一个问题,就是调用接口获取信息到页面上,内容与HTML5标签一起获取过来了.一起显示在微信端上.一般都是二次开发才有可能出现这种问题.通过查找方法,找到了一个可以把HTML5标签转 ...

  7. javascript实现获取指定精度的上传文件的大小简单实例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 莫队算法 sqrt(n)分块思想

    在此说一下本渣对莫队算法思想的一些浅薄理解 莫队算法的思想就是对真个区间的分块,然后按照每块来分别进行计算,这样最终的复杂度可以达到n*sqrt(n) 小Z的袜子是一道非常经典的题目.:题目链接htt ...

  9. (转)OpenFire源码学习之九:OF的缓存机制

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43415023 关于缓存,openfire存储到了本地JVM中.本人认为这样并不是很好.以 ...

  10. equals与==的区分

    equals与==的区分 对于比较数值 public class Test { public static void main(String[] args){ int a=30; int b=30; ...