时间年月日select联动下拉框插件

原创 2016年08月31日 08:54:30

date-option.js

var dateOption = (function () {

    var option = { 0: "nian", 1: "yue", 2: "ri" };
    function renderOption(min, max) {
        var i = min, optionHtml = "";
        for (; i < max; i++) {
            optionHtml += "<option value='" + i + "'>" + i + "</option>";
        }

        optionHtml = "<option value='-1'>选择</option>" + optionHtml;

        return optionHtml;
    }
    function getTotalDayByDate(year, month) {
        var dayCount = 0;
        switch (month) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                dayCount = 31;
                break;
            case 4:
            case 6:
            case 9:
            case 11:
                dayCount = 30;
                break;
            case 2:
                //闰年计算
                if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))
                    dayCount = 29;
                else
                    dayCount = 28;
                break;
        }
        return dayCount;
    }
    $("#nian").empty().append(renderOption(1920, 2017));
    $("#yue").empty().append(renderOption(1, 13));
    $("#yue").change(function () {
        var year = parseInt($("#nian").val());
        var month = parseInt($(this).val());
        var dayCount = getTotalDayByDate(year, month);
        $("#ri").siblings("span").text("选择");
        $("#ri").empty().append(renderOption(1, dayCount + 1));
    });
    $("#nian,#yue,#ri").change(function () {
        var val = $(this).val();
        $(this).siblings("span").text(val);
    });
})();

使用方法:绑定对应的id
HTML

<div class="fl">
     <select class="ipt" id="nian"></select>
     <label class="surname"></label>
     <select class="ipt" id="yue"></select>
     <label class="surname"></label>
     <select class="ipt" id="ri"><option>选择</option></select>
     <label class="surname"></label>
</div>

JQ获取选中值

//年
var year = $('#nian').find("option:selected").val();
//月
var month = $('#yue').find("option:selected").val();
日
var day = $('#ri').find("option:selected").val();
版权声明:交流QQ号2766588380,欢迎访问web前端工程师简介 http://www.xuyupeng.com/

pojo类和vo类分别是什么

转:http://blog.sina.com.cn/s/blog_4adc4b090101kuks.html vo有两种说法,一个是viewObject,一个是valueObject.. 就拿前者...
  • jackljf
  • jackljf
  • 2013年08月09日 11:40
  • 800

#学习笔记#(5)表格奇偶行颜色样式JavaScript+CSS+HTML

表格奇偶行样式 .odd { background:#ffffee; } .even { background:#fff38f; } .first { background:red;...

下拉框选择年月日代码

  • 2012年04月27日 21:46
  • 3KB
  • 下载

js下拉框选择年月日代码

  • 2014年09月26日 09:55
  • 4KB
  • 下载

JS实现年月日下拉框的联动

第一次写博客,刚学JS部分2天,新手写个年月日的下拉框。欢迎指正!

自写日期年月日三级联动效果jquery插件

哈哈,好久没写新博文啦,原因是最近一直在研究用jquery UI实现截取头像的功能,哈哈 言归正传,有时候呢,我们会在用户资料的页面用到一个年月日日期的三级联动效果。在网上找了找,没看到有多么合适...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:时间年月日select联动下拉框插件
举报原因:
原因补充:

(最多只允许输入30个字)