原生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 ...
随机推荐
- javascript 心得
1.&&和||等逻辑判断运算标记可以当成条件运算来使用例如: var a = b = c = "12"; (a=="13"&& ...
- Makefile的编写
makefile介绍 makefile的功能是管理源文件的编译链接,在makefile我们可以定义一系列的规则来指定哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能 ...
- java IO输入输出流中的各种字节流,字符流类
字节流字节流主要是操作byte类型数据,也byte数组为准,主要操作类就是·字节输出流:OutputStream·字节输入流:InputStream字符流在程序中一个字符等于2个字节,那么java提供 ...
- Oracle:试图访问正在使用的事务临时表
处理步骤为 1.找到表ID select * from dba_objects where object_name like 'TPT_RPWORPA1_QRY' 2.通过表ID查找正在使用的事务 s ...
- xtrabackup 使用说明(续)
背景: 关于物理备份工具xtrabackup的一些说明可以先看之前写过的文章说明:xtrabackup 安装使用.现在xtrabackup版本升级到了2.4.4,相比之前的2.1有了比较大的变化:in ...
- 内存动态分配之realloc(),malloc(),calloc()与new运算符
1,malloc与free是C/C++的标准库函数,new/delete是C++的运算符,是C++面向对象的特征,它们都可用于申请动态内存和释放内存.2,对于非内部数据类型的对象而言,光用maloc/ ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- 浅谈spring 声明式事物
此处主要讲讲事物的属性. 事物属性包含了五个方面: 1.传播行为 2.隔离规则 3.回滚规则 4.事物超时 5.是否只读 一.传播行为 事务的第一个方面是传播行为(propagation behavi ...
- js 数组删去重复的加上没有的元素
为了一个数组的删除操作竟然费了一个多小时,下面分享一下我的代码: 代码功能:判断数组里是否有我要看的元素,如果没有就添加到数组里,如果有就去掉. var selectArr=[]; function ...
- Visual Studio将std::cout输出到Output窗口
在debug的时候,输出到Output需要使用OutputDebugString函数,但部分库的log是采用std::cout输出的,需要用控制台(黑窗)程序来查看输出.有没有一种使用GUI和Outp ...