`
highfly-s
  • 浏览: 100415 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

级联下拉列表选择框日期

jquery 级联下拉日期 
阅读更多

<html>
<head>
<title> 年月日三下拉框联动 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function ($) {
            $.extend($.fn, {
                sjSelect: function (options) {
                    // 默认参数
                    var settings = {
                        s_year: 1920,
                        e_year: new Date().getFullYear()+1,
                        index: null,
                        cssClass: "lSelect" // 下拉框css名称                      
                    };
                    $.extend(settings, options);
 
                    return this.each(function () {
                        var $this = $(this);
                        var MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                        var _selstr = "";
                        var _selArr;
                        if (typeof ($this.attr("sel")) != "undefined") {
                            _selstr = $this.attr("sel");
                            _selArr = _selstr.split(',');
                            $this.val(_selstr);
                        }
 
 
                        var _rIndex = settings.index == null ? "" + Math.round(Math.random() * 1000000) : settings.index;
                        var _allstr = "<select class='" + settings.cssClass + " year" + _rIndex
                            + "'><option vlaue=''>请选择年份</option>";
                        for (var i = settings.s_year; i < settings.e_year; i++) {
                            _allstr += "<option vlaue='" + i + "'";
                            if (_selstr.length > 0) {
                                if (i == _selArr[0]) {
                                    _allstr += " selected";
                                }
                            }
                            _allstr += ">" + i + "年</option>";
                        }
                        _allstr += "</select>";
 
                        _allstr += "<select class='" + settings.cssClass + " month" + _rIndex
                            + "'><option vlaue=''>请选择月份</option>";
                        for (var k = 1; k <= 12; k++) {
                            _allstr += "<option vlaue='" + k + "'";
                            if (_selstr.length > 0) {
                                if (k == _selArr[1]) {
                                    _allstr += " selected";
                                }
                            }
                            _allstr += ">" + k + "月</option>";
                        }
                        _allstr += "</select>";
 
                        var n = 0;
                        if (_selstr.length > 0) {
                            n = MonHead[_selArr[1] - 1];
                            if (_selArr[1] == 2 && IsPinYear(_selArr[0])) {
                                n++;
                            }
 
                        } else {
                            var _cTime = new Date();
                            var _cMonth = _cTime.getMonth();
                            var _cYear = _cTime.getYear();
                            n = MonHead[_cMonth];
                            if (_cMonth == 1 && IsPinYear(_cYear)) {
                                n++;
                            }
                        }
 
                        _allstr += "<select class='" + settings.cssClass + " day" + _rIndex
                            + "'><option vlaue=''>请选择日</option>";
                        for (var h = 1; h <= n; h++) {
                            _allstr += "<option vlaue='" + h + "'";
                            if (_selstr.length > 0) {
                                if (h == _selArr[2]) {
                                    _allstr += " selected";
                                }
                            }
                            _allstr += ">" + h + "日</option>";
                        }
                        _allstr += "</select>";
 
                        $this.after(_allstr);
 
                        function IsPinYear(year) {//判断是否闰平年                      
                            return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
                        }
                        function writeDay(n) {     //据条件写日期的下拉框                      
                            var _daystr = "<option vlaue=''>请选择日</option>";
                            for (var i = 1; i <= n; i++) {
                                _daystr += "<option vlaue='" + i + "'>" + i + "日</option>";
                            }
                            $(".day" + _rIndex).html(_daystr);
                        }
                        function getJlSelVal() {
                            var _year_val = $(".year" + _rIndex).val();
                            var _month_val = $(".month" + _rIndex).val();
                            var _day_val = $(".day" + _rIndex).val();
                            if (_year_val == "请选择年份" || _month_val == "请选择月份" || _day_val == "请选择日") {
                                $this.val("");
                            } else {
                                var _lastval = _year_val.substring(0, _year_val.length - 1)
                                    + "," + _month_val.substring(0, _month_val.length - 1)
                                    + "," + _day_val.substring(0, _day_val.length - 1);
                                $this.val(_lastval);
                            }
                        }
                        $(".day" + _rIndex).change(function () {
                            getJlSelVal();
                        });
                        $(".year" + _rIndex).change(function () {//年发生变化时日期发生变化(主要是判断闰平年)
                            var MMvalue = $(".month" + _rIndex).val();
                            if (MMvalue == "请选择月份") {
                                $(".day" + _rIndex).html("<option value=''>请选择日</option>");
                                return;
                            }
                            var n = MonHead[MMvalue.substring(0, MMvalue.length - 1) - 1];
                            var YYval = $(".year" + _rIndex).val();
                            if (MMvalue.substring(0, MMvalue.length - 1) == 2 && IsPinYear(YYval.substring(0, YYval.length - 1))) {
                                n++;
                            }
                            writeDay(n);
                            getJlSelVal();
                        });
                        $(".month" + _rIndex).change(function () {//月发生变化时日期联动
                            var YYYYvalue = $(".year" + _rIndex).val();
                            if (YYYYvalue == "请选择年份") {
                                $(".day" + _rIndex).html("<option value=''>请选择日</option>");
                                return;
                            }
                            var MMvalue = $(".month" + _rIndex).val();
                            var _cmon = MMvalue.substring(0, MMvalue.length - 1);
                            var n = MonHead[_cmon - 1];
                            if (_cmon == 2 && IsPinYear(YYYYvalue.substring(0, YYYYvalue.length - 1)))
                                n++;
                            writeDay(n);
                            getJlSelVal();
                        });
 
                    });
                }
            });
        })(jQuery);
        $(function () {
            $(".gg").sjSelect();
            $("#dd").click(function () {
                $(".gg").each(function () {
                    alert($(this).val());
                });
            });
        });
    </script>
 
</head>
<body>
<input type="hidden" class="gg" sel="1989,10,1" />
<input type="hidden" class="gg" sel="2008,2,29" />
<input type="button" id="dd" />
</body>
</html>

分享到：
| web打印控件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsp出生日期三级级联下拉列表

    在本文中，我们将深入探讨如何在JSP（JavaServer Pages）中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景，让用户能够方便地选择他们的出生年、月和日。 首先，...

    Uniapp 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本

    多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker stepper input ，引用组件或者复制粘贴使用，提高工作效率。

    基于jquery的H5移动端选择器，日期选择器，自定义级联选择器，自定义html选择器

    通常，这样的选择器会包含年、月、日的滑动选择或者下拉菜单，使得用户可以快速、准确地设定日期，避免手动输入可能带来的错误。 级联选择器（Cascading Selectors）则是一种允许用户从一系列相关选项中逐级选择的...

    jQuery实现动态生成年月日级联下拉列表示例

    在网页开发中，有时我们需要创建级联的下拉列表，比如年、月、日，以供用户选择日期。本示例将详细介绍如何使用jQuery来实现这样的功能。首先，我们需要了解jQuery的基本用法以及如何处理DOM元素。 jQuery是一个...

    uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

    Picker组件是uni-app提供的一种UI控件，用于显示一个可滚动的选择列表，通常用于日期选择、时间选择或自定义数据选择等。 一、一级选择器 一级选择器是最简单的形式，通常用于单列选择。在uni-app中，我们可以使用`...

    zepto.js 版时间 日期 下拉 省市区级联

    `mobiscroll版时间 日期 下拉 省市区级联.zip`则是mobiscroll组件的压缩包，包含了相关的CSS和JS文件，用于构建级联选择器。`css`和`js`目录则分别存储了项目的样式表和脚本文件。 综上所述，这个项目展示了HTML5的...

    日期级联，大家的最爱

    在创建日期级联时，HTML元素如`&lt;select&gt;`会被用来创建下拉菜单，用户可以从中选择日期的各个部分。例如，我们可以创建三个`&lt;select&gt;`元素，分别对应年、月和日，每个菜单中的选项都是动态生成的。 接着，JavaScript...

    推荐2款Android安卓APP 三级联动的选择控件.zip

    在Android应用中，这通常表现为三个连续的下拉列表，每个列表的选项都基于前一个列表的选择动态更新。例如，在选择日期时，用户首先选择年份，然后根据所选年份筛选出相应的月份，最后再根据月份筛选出对应的日期。 ...

    js实现日期级联效果

    级联效果的实现首先需要定义三个下拉列表（select），分别用于选择年份、月份和日期。如下代码所示： ```html (this.value)"&gt; 请选择年 (this.value)"&gt; 选择月 选择日 ``` 每个`select`元素都有一...

    easyui的datagrid中editor和combobox的级联

    Combobox是一种下拉选择框，用户可以在预设的选项中进行选择。在某些场景下，我们需要根据前一列的选择来动态改变Combobox的选项，这就是级联（cascading）的概念。 实现级联编辑器的关键在于监听Datagrid的`...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    它支持多种类型的输入，如文本、选择框、日期等，其中就包括了下拉框（select）编辑类型。这个功能使得用户可以直接在页面上修改表格数据，而无需跳转到新的页面或者弹出模态框。 在Bootstrap Table中集成`...

    产品经理必备Ant Design4.40-最新精编文件22年1月，AXURE原型设计，需要的素材和才考内容里面都有可以借鉴。

    autocomplete自动完成、checkbox多选框、cascader级联选择、datepicker日期选择框、form表单、inputnumber数字输入框、input输入框、mentions提及、rate评分、radio单选框、switch开关、slider滑动输入框、select...

    AjaxControlToolKit 3.5

    - CascadingDropdown：级联下拉列表，当用户在一个下拉列表中选择一项时，另一个下拉列表会根据此选择自动填充。 - MaskedEdit：掩码编辑器，用于输入符合特定格式的数据，如电话号码或日期。 - ModalPopup：模态弹...

    web元件库 ElementUI元件库+后台模板页面（支持Axure8及9）

    包含导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、...

    轻松掌握Ajax.net系列教程（主要讲toolkit）.doc

    【CascadingDropDown】控件是一个用于实现级联下拉列表的组件，它可以将一个下拉列表的选择影响另一个下拉列表的内容，常用于在选择省份后自动填充城市列表等场景。 【TextBoxWatermarkExtender】则为文本框添加了...

    JS资料大全(网页设计师工作中常用到的)

    5. **JS+CSS和图片美化下拉列表选择框（select).txt**：此文件可能是关于使用JS和CSS美化HTML select元素，通过自定义样式和交互，使原本生硬的下拉列表变得更具视觉吸引力。 6. **JS树形菜单.txt**：树形菜单在...

    jQuery插件教程(搜罗了全部插件).docx

    - jQuery controlled dependent (or Cascading) Select List：创建级联下拉列表。 - Multiple Selects：支持多选的下拉框。 - Select box manipulation：提供对选择框的各种操作方法。 - jQuery - LinkedSelect...

    JQuerry 插件介绍

    - jQuery controlled dependent (or Cascading) Select List：创建级联下拉菜单。 - Multiple Selects：支持多选的下拉菜单。 - Select box manipulation：控制和定制选择框的行为。 - Select Combo Plugin：...

    客户端技术编程

    实验中，jQuery用于实现更方便的DOM操作，如级联下拉列表的实现，这可能涉及到`$("#native_place")`的选择器以及`.change()`事件监听。 5. jQuery UI: 是jQuery的一个扩展库，提供了一些可复用的用户界面组件，如...

    AJAX控件整理(终极版).docx

    11. CascadingDropDown：级联下拉列表，一个下拉列表的选择会影响另一个下拉列表的选项。 12. CollapsiblePanel：允许用户折叠和展开面板内容，节省页面空间。 13. ConfirmButtonExtender：在点击按钮前弹出确认...

Magicbox
Global site tag (gtag.js) - Google Analytics