原生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 ...
随机推荐
- nexus的使用
一.在百度网盘或官网下载nexus,并部署. 注意修改: https://repository.apache.org/content/repositories/releases/ 二.下载m ...
- TCP/IP模型详解
上述为TCP/IP的协议模型,主机到网络层又被称为网络接口层,网络互联层又被称为网间层. 网络接口层:实际上,TCP/IP参考模型并没有真正描述这一层的实现,只是要求能够提供给其上层一个访问接口,以便 ...
- Android app AOP添加埋点技术总结
目标:通过面向切面编程来实现对源代码无侵入的埋点. 方式 能力 缺点 学习曲线 XPosed 运行期hook 能hook自己应用进程的方法: 能hook别的应用的方法: 能hook系统方法 ...
- bootstrap validate 实现页面动态验证(formvalidate)
关于基本的bootstrap validate 验证方法外面有许多博客上都有讲解,我就不在过多叙述了.大家也可以去看官网api:http://bv.doc.javake.cn/api/ 今天要说的是动 ...
- RSA非对称性前端加密后端解密
前端加密代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- ThinkPHP函数详解:U方法
U方法用于完成对URL地址的组装,特点在于可以自动根据当前的URL模式和设置生成对应的URL地址,格式为:U('地址','参数','伪静态','是否跳转','显示域名');在模板中使用U方法而不是固定 ...
- arm_GPIO_简单编程例题
题目 分析下面的汇编led.s,查看S5PV210手册,说明程序的功能,和最终的运行结果,以及相关的硬件原理图,S5PV210手册可以在教学资源里的学习资料文件夹中下载. .equ GPH3CON ...
- mssqlserver 数据库一直提示“正在还原”
今天访问服务器,突然发现不知道数据库被谁给还原了,而且一直处于还原状态无法结束. 通过查询说是恢复进程被挂起了,最终通过命令: RESTORE database dbname with recov ...
- File System的简单操作
在进行这些操作之前,需要在js文件中导入fs模块 const fs = require("fs"); const是定义一个常量,比较特殊的是,使用const定义时必须赋值,一旦被赋 ...
- AOP 面向切面编程, Attribute在项目中的应用
一.AOP(面向切面编程)简介 在我们平时的开发中,我们一般都是面对对象编程,面向对象的特点是继承.多态和封装,我们的业务逻辑代码主要是写在这一个个的类中,但我们在实现业务的同时,难免也到多个重复的操 ...