用jQuery,ajax,实现三级联动封装JS的文件
// 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的文件的更多相关文章
- ASP.NET webform基于Jquery,AJAX的三级联动
主要html代码 <select id="province"> <option value="0">--请选择省份--</opti ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- JQuery+Ajax实战三级下拉列表联动(八)
本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...
- ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理(在线下单)
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
- ajax 实现三级联动下拉菜单
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- jQuery实现select三级联动
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- 简单jquery实现select三级联动
简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...
随机推荐
- 【leetcode】bash脚本练习
[192]Word Frequency Write a bash script to calculate the frequency of each word in a text file words ...
- ssh-key添加之后依旧需要密码输入Bug的解决
场景重现 要求从10.183.93.181的root用户ssh免密登录至10.110.155.26的boss用户 1.在10.110.155.26 的boss用户下面新建目录.ssh 2.在10.11 ...
- PHP水仙花数的实现
php水仙花数是什么? 水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3 + 3^3 = 153)三位的水仙花数共有4个:153,3 ...
- 【leetcode】957. Prison Cells After N Days
题目如下: There are 8 prison cells in a row, and each cell is either occupied or vacant. Each day, wheth ...
- javascript null vs undefined
这个是很古老的问题了. 一直存在争议,有些人认为,很多语言没用 undefined 也活的好好,为啥要 undefined 呢. 那有了 undefined 是否还需要 null 呢 ? typesc ...
- Robot Framework:接口测试
---恢复内容开始--- robotframework进行接口测试,需要安装Request和RequestLibrary包 pip install requests pip install -U ro ...
- 状态压缩dp增量统计贡献——cf1238E(好题)
这题的状态设计非常巧妙,因为dp[S]表示的并非当前正确的值,而是维护一个中间量,这个中间量在到达末状态时才正确 当然官方的题解其实更加直观,只不过理解起来其实有点困难 /* 给定一个串s,字符集为2 ...
- 工程师技术(一):启用SELinux保护、自定义用户环境、配置IPv6地址、配置聚合连接、配置firewalld防火墙
一.启用SELinux保护 目标: 本例要求为虚拟机 server0.desktop0 配置SELinux: 确保 SELinux 处于强制启用模式 在每次重新开机后,此设置必须仍然有效 方案: SE ...
- 高级运维(一):反向代理&使用Varnish加速Web
案例1.反向代理 目标: 1.代理服务器可以将远程的Web服务器页面缓存于本地 2.代理服务器端口设置为80端口 3.用户通过访问代理服务器即可获得远程Web服务器页面上的内容 4.远程We ...
- BZOJ 4698: Sdoi2008 Sandy的卡片(后缀数组+差分+二分答案)
传送门 解题思路 看到一个子串加一个数字到另一个子串,自然可以想到差分.然后要把所有串都拼起来,求出\(height\)数组后可以二分答案来做,每次二分一个答案后统计一下连续的\(height> ...