关闭

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

标签: select插件年月日插件年月日下拉框
176人阅读 评论(0) 收藏 举报
分类:

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();
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:94295次
    • 积分:2773
    • 等级:
    • 排名:第13088名
    • 原创:183篇
    • 转载:36篇
    • 译文:0篇
    • 评论:15条
    最新评论