原生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 ...
随机推荐
- Webstorm 2016.3激活码
webstorm 2016.3 可用激活码, 使用activation code方式激活 就这么任性,就这么长 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKI ...
- JavaScript 常用正则表达式
==========================正则表达式=========================== 常用元字符 代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划 ...
- docker版wordpress
拉取wordpress镜像 docker pull wordpress:latest 创建mysql 容器docker run --name wordpress-mysql -e MYSQL_ROOT ...
- JS 格式化当前时间
Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+& ...
- java 保留字符串数字的位数,不够前面补0
@Test public void test() { this.printToConsole(autoGenericCode("10011")); this.printToCons ...
- MVC 定时执行任务
环境:.net4.5 需求:需要一个方法定时执行任务 解决: System.Threading.Timer 提供以指定的时间间隔执行方法的机制. 此类不能被继承,有10多种实例化方法,满足多种情况. ...
- STM32学习及应用笔记一:SysTick定时器学习及应用
这几年一直使用STM32的MCU,对ARM内核的SysTick计时器也经常使用,但几乎没有仔细了解过.最近正好要在移植一个新的操作系统时接触到了这块,据比较深入的了解了一下. 1.SysTick究竟是 ...
- GPS 气压计高度测量
气压计测某个点的高度是不准的,因为天气.温度等原因会导致不同时刻同一地点气压不同,所以气压计测量不准.但气压计测量相对高度是很准的.GPS测相对高度不准,但测定点高度比较准.
- Easyui 去掉datagrid 行的样式,并点击checked 改边行颜色!
--最近客户提出的需求 全选高亮样式太丑,每行选中不需要背景图片颜色,字体变黑色,未选中变灰色. 先把代码和改变后的图片 贴出来. /* 初始化DataFrid数据 */ initDataGrid: ...
- SQL多表查询,消除表中的重复的内容
看到朋友再写一个SQL语句:两个表a1表中有SN.SN2.TN,b1表有SM.SM2.TN2,若a1的SN中的数据和b1的SM中的数据是一致的,那么将a1中对应的数据修改成b1中对应的数据. upda ...