这个算生日日期,因为是从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 年月日、省市区 三级联动的更多相关文章

  1. 【原生js】原生js的省市区三级联动

    html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. 原生javascript制作省市区三级联动详细教程

    多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...

  3. 原生javascript实现省市区三级联动

    腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...

  4. js实现省市区三级联动

    电商平台或者一些网站的个人信息部分,通常会有填写地址的功能.该功能一般分为二级联动(省.市)和三级联动(省.市.区),只需要JavaScript就可以实现. 这里介绍一种很简洁易用的方法.参考地址:h ...

  5. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  6. angular.js实现省市区三级联动指令

    不多说,直接上代码,一开始搞了好久,最后才弄懂,希望对大家有帮助 1.jade div.col-md-2 select.form-control(ng-options="value.code ...

  7. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  8. vue 引用省市区三级联动(插件)

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

  9. 原生JS实现省市区(县)三级联动选择

    原文地址→看过来 写在前面 前段时间写一个关于天气的东西,里面的省市区(县)城市选择让我很头疼,在网上搜索出来大都是借助插件或者第三方库,感觉这样做代码会很重,所以索性就把几种城市选择的方式实现一遍, ...

  10. 插件 原生js 省市区 三级联动 源码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 关于Access restriction: The type 'Application' is not API (restriction on required library)

    原文链接:http://rxxluowei.iteye.com/blog/671893 今天写第一次写JavaFX的入门程序就GG 遇到了导入API的问题,无奈疯狂地通过网络找解决方案.. 我的问题是 ...

  2. [转]SpringMVC Controller介绍及常用注解

    一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...

  3. spring中InitializingBean接口使用理解

    InitializingBean接口为bean提供了初始化方法的方式,它只包括afterPropertiesSet方法,凡是继承该接口的类,在初始化bean的时候会执行该方法. 测试程序如下: imp ...

  4. BZOJ 2086: [Poi2010]Blocks

    Description 每次可以将大于 \(k\) 的一个数 \(-1\), 在左边或右边的数 \(+1\) ,问最大能得到多长的序列每个数都大于等于 \(k\) . Sol 单调栈. 这道题好神啊q ...

  5. Ubuntu14.04更新源、安装chrome/搜狗输入法

    目录: 1.更新源 2.安装chrome 3.安装搜狗输入法     1.更新源 三步: cp /etc/apt/sources.list /etc/apt/sources.list_backup   ...

  6. 乐校园单车项目第一天——购买Apple开发者账号、创建SVN

    日常三问: 1. 我应该干什么? 2. 我能干什么? 3. 我想干什么?

  7. Count the number of possible triangles

    From: http://www.geeksforgeeks.org/find-number-of-triangles-possible/ Given an unsorted array of pos ...

  8. 我的Hcharts的页面应用

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. js如何求一组数中的极值

    这是一个很简单的问题,现在我们从循环开始,例如一组数[5,2,1,3,4];求其中的最大值,那么首先我们要定义一个max的中间变量,遍历数组,当遇到比max值大则赋值给max,直到循环结束,就能获取这 ...

  10. zsh 命令提示符 PROMPT

    使用上zsh后,发现命令提示符显示不了当前的路径,和一般的Linux系统默认提示不一致.配置自己的提示符: 更改配置文件.zshrc,添加配置PROMPT='%m:%. $',重新打开一个窗口生效. ...