原生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 ...
随机推荐
- Ajax发送POST请求SpringMVC页面跳转失败
问题描述:因为使用的是SpringMVC框架,所以想使用ModelAndView进行页面跳转.思路是发送POST请求,然后controller层中直接返回相应ModelAndView,但是这种方法不可 ...
- html显示缩略小图 无失真图片
<html> <head> <title>我的图片处理</title> <style type="text/css"> ...
- nginx windows负载均衡入门
前言 做了几年开发,都是只管码代码,没有参与过项目的部署,为了知识体系更加完整,于是开始学习一下负载均衡.查了一下资料,觉得用nginx +iis 比较简单,于是小试牛刀. 步骤 准备工作 下载ngi ...
- linux 批量删除进程
2016年11月18日 13:11:10 星期五 ps -ef | grep pname | awk '{print $2}' | xargs kill 解释: 杀掉所有包含 'pname' 的进程
- php二进制安全的含义
PHP里,有string的概念.string里,每个字符的大小为byte(与PHP相比,Java的每个字符为Character,是UTF8字符,C语言的每个字符可以在编译时选择). byte里,有AS ...
- apk逆向 - smali动态调试
author: Dlive date: 2016/10/6 0x00 前言 之前有人问过smali的动态调试方法,其实网上已经有很多文章讲这些内容,但是为了方便大家学习,我还是写一下让大家少走点坑 ...
- shell:遍历目录和子目录的所有文件
#!/bin/bash function getdir(){ ` do dir_or_file=$"/"$element if [ -d $dir_or_file ] then g ...
- JavaScript Array map() 方法
语法: array.map(function(currentValue,index,arr), thisValue) currentValue:必须.当前元素的值index:可选.当期元素的索引值ar ...
- Delphi XE 10 DataSnap TCP 与 HTTP 比较
在网络程序开发过程中,面临TCP HTTP 的选择上往往让人陷入犹豫不决中,http的灵活和较强的穿透能力是TCP无法与之相提并论的,然而在响应速度和处理能力上却能看出后者比前者足够强大的地方.因此 ...
- 创建cocos项目并打包