用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 ...
随机推荐
- 洛谷P3979 遥远的国度 树链剖分+分类讨论
题意:给出一棵树,这棵树每个点有权值,然后有3种操作.操作一:修改树根为rt,操作二:修改u到v路径上点权值为w,操作三:询问以rt为根x子树的最小权值. 解法:如果没有修改树根操作那么这题就是树链剖 ...
- Tensorflow的基础用法
简介 Tensorflow是一个深度学习框架,它使用图(graph)来表示计算任务,使用tensor(张量)表示数据,图中的节点称为OP,在一个会话(Session)的上下文中执行运算,最终产生ten ...
- printf sscanf进阶
printf ; printf (3d", a);//将打印 035 printf(“%-*s”, width, string): “*”: 在这里用width代替,其实和printf(“% ...
- java中this和super关键字的作用
this是对象内部指代自身的引用,同时也是解决成员变量和局部变量同名问题:this可以调用成员变量,不能调用局部变量:this也可以调用成员方法,但是在普通方法中可以省略this,在构造方法中不允许省 ...
- node js实战:带数据库,加密的注册登录表单
demo 注册效果: 登陆效果: 数据库截图: 数据库操作 db.js //这个模块里面封装了所有对数据库的常用操作 var MongoClient = require('mongodb ...
- 阿里云智能推荐AIRec产品介绍
一.智能推荐(AIRec)简介 AIRec背景介绍 智能推荐(简称AIRec)基于阿里巴巴集团领先的大数据和人工智能技术,结合阿里巴巴在电商.内容.新闻.视频直播和社交等多个行业领域的积累,为全球企业 ...
- Android中的ListView的绘制过程中执行的方法
首先,系统在绘制ListView之前, 将会先调用getCount方法来获取Item的个数.(如果getCount方法返回0的话,列表时不显示任何内容的) 之后每绘制一个 Item就会调用一次getV ...
- Linux服务器的16个监控命令
想不想知道你的服务器到底在干什么?那么你要知道本文介绍的这些基本命令.一旦你熟悉掌握了这些命令,就为成为专业的 Linux系统管理员打下了基础. 你可以通过图形化用户界面(GUI)程序来获取这些外壳命 ...
- CF 600E. Lomsat gelral(dsu on tree)
解题思路 \(dsu\) \(on\) \(tree\)的模板题.暴力而优雅的算法,轻儿子的信息暴力清空,重儿子的信息保留,时间复杂度\(O(nlogn)\) 代码 #include<iostr ...
- centos7安装kylo0.10.1
安装环境centos7,kylo版本0.10.1 常用的链接地址 kylo官网:https://kylo.io/ kylo文档:https://kylo.readthedocs.io/ 下载地址 官网 ...