用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 ...
随机推荐
- Nodejs常用代码段
1、利用createReadStream方式计算大文件的md5签名 const fs = require('fs'); const crypto = require('crypto'); let pa ...
- 浅谈无线h5开发
最近一直在做h5的项目,对h5开发有了自己的理解.首先h5开发并不是指的html5的开发,而是指无线端的web开发,至于为什么叫h5开发,我觉得一方面是因为html5近几年还是挺受关注,另一方面h5在 ...
- mongodb4.0数据库权限配置
今天给大家分享一个关于mongodb数据库权限配置的小知识点,这里呢,我用的是mongodb4.0版本,下载地址:https://www.mongodb.com/download-center/com ...
- 阿里小程序Serverless 操作指南
小程序云 小程序云(Mini Program Cloud)是阿里云面向小程序场景提供的一站式云服务,帮助开发者实现一云多端的业务战略,提供了有服务器和无服务器两种模式.云应用是有服务器模式,提供了包括 ...
- ios移动输入框被软键盘遮挡
页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this) ...
- 杂项-笔记-VS:VS2019笔记
ylbtech-杂项-笔记-VS:VS2019笔记 1.返回顶部 1. http://www.ddooo.com/softdown/142335.htm 2. 2.返回顶部 3.返回顶部 4. ...
- python3使用requests和requests_toolbelt上传文件
https://blog.csdn.net/summerpowerz/article/details/80293235 https://blog.csdn.net/lhh08hasee/article ...
- java读取pdf文本转换html
补充:一下代码基于maven,现将依赖的jar包单独导出 地址:pdf jar 完整代码地址 也就两个文件 java读取pdf中的纯文字,这里使用的是pdfbox工具包 maven引入如下配置 < ...
- 为什么Netty这么火?与Mina相比有什么优势?
Netty是什么?为什么这么火? Netty是目前最流行的由JBOSS提供的一个Java开源框架NIO框架,Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服 ...
- Python匿名函数(lambda函数)
匿名函数 -- 一行函数 lambda -- 关键字 x是普通函数的形参(位置,关键字...)可以不接收参数(x可以不写) :x是普通函数的函数值(只能返回一个数据类型)(:x返回值必须写) 1)此函 ...