原生JS 年月日、省市区 三级联动
这个算生日日期,因为是从100年前的到现年。
<select id="sel_year"></select> <select id="sel_month"></select> <select id="sel_day"></select>
function dateLinkage(yearId, monthId, dayId, defaultYear, defaultMonth, defaultDay) {
var objYear = document.getElementById(yearId);
var objMonth = document.getElementById(monthId);
var objDay = document.getElementById(dayId);
var MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var year1 = new Date().getFullYear(), year2 = '', year3 = '';
var month1 = '', month2 = '', month3 = '';
var day1 = '', day2 = '', day3 = '';
//生成年
for (var i = (year1 - 100) ; i < year1; i++) {
year2 = i == defaultYear ? 'selected="selected"' : '';
year3 += '<option value="' + i + '" ' + year2 + '>' + i + '</option>';
}
objYear.innerHTML = year3;
//生成月
for (var i = 1; i <= 12; i++) {
month1 = i < 10 ? ("0" + i) : i;
month2 = i == defaultMonth ? 'selected="selected"' : '';
month3 += '<option value="' + month1 + '" ' + month2 + '>' + month1 + '</option>';
}
objMonth.innerHTML = month3;
//生成日
for (var i = 1; i <= 31; i++) {
day1 = i < 10 ? ("0" + i) : i;
day2 = i == defaultDay ? 'selected="selected"' : '';
day3 += '<option value="' + day1 + '" ' + day2 + '>' + day1 + '</option>';
}
objDay.innerHTML = day3;
//年份变化事件
objYear.change(function () {
var curm = parseInt(objMonth.val());
var num = MonHead[curm - 1];
if (IsLeapYear(this.value)) {
num = 29;
}
day3 = '';
for (var i = 1; i <= num; i++) {
day1 = i < 10 ? ("0" + i) : i;
day3 += '<option value="' + day1 + '">' + day1 + '</option>';
}
objDay.innerHTML = day3;
});
//月份变化事件
objMonth.change(function () {
var curm = parseInt(this.value);
var num = MonHead[curm - 1];
if (IsLeapYear(objYear.val()) && curm == 2) {
num = 29;
}
day3 = '';
for (var i = 1; i <= num; i++) {
day1 = i < 10 ? ("0" + i) : i;
day3 += '<option value="' + day1 + '">' + day1 + '</option>';
}
objDay.innerHTML = day3;
});
//判断是否是闰年
function IsLeapYear(year) {
return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
}
}
省市区联动,变量名没有好好想,随意了点。
<select id="sf"> </select> <select id="cs"> </select> <select id="qy"> </select>
function liandong(sfid, csid, qyid, sfDefault, csDefault, qyDefault) {
var sfbox = document.getElementById(sfid);
var csbox = document.getElementById(csid);
var qybox = document.getElementById(qyid);
var sfinit = function () {
var list = '';
for (var i = 0; i < provinceList.length; i++) {
var cursf = provinceList[i];
var strSel = cursf.name == sfDefault ? ' selected="selected"' : '';
list += '<option' + strSel + '>' + cursf.name + '</option>';
}
sfbox.innerHTML = list;
csinit();
};
var csinit = function () {
var list = '';
var curcslist = provinceList[sfbox.selectedIndex].cityList;
for (var i = 0; i < curcslist.length; i++) {
var curcs = curcslist[i];
var strSel = curcs.name == csDefault ? ' selected="selected"' : '';
list += '<option' + strSel + '>' + curcs.name + '</option>';
}
csbox.innerHTML = list;
qyinit();
};
var qyinit = function () {
var list = '';
var curqylist = provinceList[sfbox.selectedIndex].cityList[csbox.selectedIndex].areaList;
for (var i = 0; i < curqylist.length; i++) {
var curqy = curqylist[i];
var strSel = curqy == qyDefault ? ' selected="selected"' : '';
list += '<option' + strSel + '>' + curqy + '</option>';
}
qybox.innerHTML = list;
};
sfbox.onchange = function () {
var list = '';
var curcslist = provinceList[sfbox.selectedIndex].cityList;
for (var i = 0; i < curcslist.length; i++) {
var curcs = curcslist[i];
list += '<option>' + curcs.name + '</option>';
}
csbox.innerHTML = list;
cschange();
};
csbox.onchange = function () {
cschange();
};
var cschange = function () {
var list = '';
var curqylist = provinceList[sfbox.selectedIndex].cityList[csbox.selectedIndex].areaList;
for (var i = 0; i < curqylist.length; i++) {
var curqy = curqylist[i];
list += '<option>' + curqy + '</option>';
}
qybox.innerHTML = list;
};
sfinit();
}
provinceList的结构:

原生JS 年月日、省市区 三级联动的更多相关文章
- 【原生js】原生js的省市区三级联动
html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- 原生javascript制作省市区三级联动详细教程
多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...
- 原生javascript实现省市区三级联动
腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...
- js实现省市区三级联动
电商平台或者一些网站的个人信息部分,通常会有填写地址的功能.该功能一般分为二级联动(省.市)和三级联动(省.市.区),只需要JavaScript就可以实现. 这里介绍一种很简洁易用的方法.参考地址:h ...
- JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
- angular.js实现省市区三级联动指令
不多说,直接上代码,一开始搞了好久,最后才弄懂,希望对大家有帮助 1.jade div.col-md-2 select.form-control(ng-options="value.code ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- vue 引用省市区三级联动(插件)
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...
- 原生JS实现省市区(县)三级联动选择
原文地址→看过来 写在前面 前段时间写一个关于天气的东西,里面的省市区(县)城市选择让我很头疼,在网上搜索出来大都是借助插件或者第三方库,感觉这样做代码会很重,所以索性就把几种城市选择的方式实现一遍, ...
- 插件 原生js 省市区 三级联动 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- poj 1737男人八题之一 orz ltc
这是楼教主的男人八题之一.很高兴我能做八分之一的男人了. 题目大意:求有n个顶点的连通图有多少个. 解法: 1. 用总数减去不联通的图(网上说可以,我觉得时间悬) 2. 用动态规划(数学递推) ...
- WPF中弹出菜单
在WPF里弹出菜单是用Popup,你那个右键的是上下文菜单(也就是快捷菜单). <Grid> <Button x:Name="BtnPop" Width=&quo ...
- oracle 学习笔记(三)
1. SQL(基础查询) 1.1. 基本查询语句 1.1.1. FROM子句 SQL查询语句的语法如下: SELECT <*, column [alias], -> FROM tabl ...
- hibernate id 策略
@Id@GeneratedValue(generator = "paymentableGenerator")@GenericGenerator(name = "payme ...
- java 深入技术七(类的结构和反射)
1.java反射(reflect) java 类的结构 java反射机制就是把java类按结构分解,每一部分对应特定的反射类 java反射机制允许运行时加载,探知和使用在编译期间完全未知的classe ...
- go:关于变量地址的疑惑
定义一些变量,并输出其地址 一.一般变量 var a, b int32 var c, d int64 输出其地址 结果: a 0xc082006310 b 0xc082006320 c 0xc0820 ...
- [转]jquery mobile中redirect重定向问题
本文转自:http://www.cnblogs.com/freeliver54/p/3529813.html 在jquerymobile提交后如果要进行网页重定向时,一定要在form或<a> ...
- 阿里云windows 2012服务器部署java web程序教程
一:环境搭建 1.首先需要购买一个阿里云ECS服务器,购买时可以选择处理器核数以及内存大小(可以购买偏低配置,因为升级 方便) 2.购买后会自动创建一个实例,可以使用该实例中显示的公网地址在 ...
- STM32学习及应用笔记一:SysTick定时器学习及应用
这几年一直使用STM32的MCU,对ARM内核的SysTick计时器也经常使用,但几乎没有仔细了解过.最近正好要在移植一个新的操作系统时接触到了这块,据比较深入的了解了一下. 1.SysTick究竟是 ...
- Oracle中使用REGEXP_SUBSTR,regexp_replace函数
REGEXP_SUBSTR函数格式如下: function REGEXP_SUBSTR(String, pattern, position, occurrence, modifier)__srcstr ...