`

jquery 日期联动

阅读更多
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Select.aspx.cs" Inherits="jquery_Learning.Select" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <mce:script type="text/javascript" src="JQUERY.JS" mce_src="JQUERY.JS"></mce:script>
    <mce:script type="text/javascript"><!--
    $(function(){
        for(var i=1990;i<2009;i++){
           $("#sel1").get(0).options.add(new Option(i,i));
        }
        for(var i=1;i<=12;i++){
           $("#sel2").get(0).options.add(new Option(i,i));
        }
        for(var i=1;i<=31;i++){
            $("#sel3").get(0).options.add(new Option(i,i));
        }    
        $("#sel1").change(function(){
            $("#sel3").empty();
            getValue($("#sel2").val(),$("#sel1").val());           
        });    
        $("#sel2").change(function(){
            $("#sel3").empty();
            getValue($("#sel2").val(),$("#sel1").val());           
        }); 
        
    });
    function getValue(i,k){
        var k=k-0;
        switch(i){
            case "1":
            case "3":
            case "7":
            case "8":
            case "10":
            case "12":{
                AddValue(31);
                break;
            }
            
            case "2":{
                if(k%4==0){
                    AddValue(29);
                }else{
                    AddValue(28);
                }
                break;
            }
            
            case "4":
            case "5":
            case "6":
            case "9":
            case "11":{
                AddValue(30);
                break;
            }
            default:{
                alert(i+"asdf"+k);
                break;
            }
        }
    }
    
    function AddValue(i){
        for(var k=1;k<=i;k++){
            $("#sel3").get(0).options.add(new Option(k,k));
        }   
    }    
    
// --></mce:script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <select id="sel1" ></select>
    <select id="sel2"></select>
    <select id="sel3"></select>
    </div>
    </form>
</body>
</html>

 

分享到:
评论

相关推荐

    jQuery日期三级联动,包含js和示例页面

    在提供的"jQuery日期三级联动"压缩包中,应包含一个HTML文件,它可能包含了HTML结构、内联CSS样式和内联JavaScript代码,或者引用了外部的jQuery库和Datepicker插件。分析这个示例页面,我们可以看到如何将理论知识...

    jquery select操作的日期联动实现代码

    总的来说,jQuery提供的这些工具和插件极大地简化了对`&lt;select&gt;`元素的操作,使得在Web应用中实现日期联动和其他动态交互变得轻松。在实际开发中,结合CSS和Ajax,我们可以构建出更加智能和用户友好的界面。

    jQuery实现日期联动效果实例

    在本文中,我们将深入探讨如何使用jQuery来实现日期联动效果,这是一种常见的前端交互功能,尤其在日历插件或表单验证中非常实用。日期联动通常指的是在一个日期选择器(如年、月、日)中选择一个日期后,根据所选...

    jQuery 联动日历实现代码

    ### jQuery联动日历实现知识点详解 #### 一、联动日历功能概述 联动日历作为一种用户界面组件,可以提供更为丰富的用户交互体验。在本文档中,将介绍以下功能点: 1. **日历显示与隐藏**:点击“确定”按钮后,...

    jquery日期插件

    而“jquery日期插件”是jQuery生态中的一个重要组成部分,它为网页应用提供了丰富的日期处理功能,使得开发者能够更加方便地处理与日期相关的用户界面。 一、jQuery日期插件的基本概念 jQuery日期插件通常是独立于...

    转:jquery日期插件!

    标题中的“转:jquery日期插件!”表明我们将讨论一个基于jQuery的日期处理插件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。日期插件通常用于在网页上添加日期...

    JQ 日期联动插件

    而"JQ 日期联动插件"则是基于jQuery库开发的一种增强日期选择功能的工具,它允许开发者创建更加灵活、易用且具有交互性的日期选择组件。该插件通常会包含多种功能,例如日期范围选择、日期格式化、日期限制等,以...

    js关于日期联动的代码

    在JavaScript编程中,日期联动通常指的是在用户选择一个日期时,其他与日期相关的元素(如时间、日历等)会自动更新或触发某些操作。这种功能常见于许多Web应用程序,如在线预订系统、日程安排工具等。在这个场景中...

    jQuery移动端触屏滑动日期控件

    8. **易用性和可扩展性**:基于jQuery构建的日期控件通常具有良好的API,开发者可以方便地与其他jQuery插件或库结合使用,扩展其功能,如添加日期验证、联动选择等。 9. **示例代码和文档**:为了帮助开发者快速...

    jquery实现日期年月日三级联动插件

    自写的jquery日期年月日三级联动插件,效果很好用,博客里面告知引用办法:http://blog.csdn.net/kabulore 有任何疑问请联系QQ:1740437

    JQuery 年月日三级下拉框联动

    一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 &lt;title&gt;JQuery 年月日三下拉框联动 &lt;script src="jquery-1.4.2.min.js" type="text/javascript"&gt; ...

    jquery年月日三级联动

    "jQuery年月日三级联动"是一种常见的交互设计,它通过下拉框的形式,让用户依次选择年、月、日,形成一个完整的日期。这种设计使得日期输入更加直观且易于操作。接下来,我们将深入探讨这个主题。 首先,jQuery是一...

    JQuery年月日三级下拉框联动

    "JQuery年月日三级下拉框联动"就是一个解决此类需求的方案,它利用JavaScript库JQuery的便利性和高效性,实现了用户在选择年份后,月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验,减少用户手动操作...

    jquery日期控件

    在本案例中,我们关注的是"jquery日期控件",这是一个基于jQuery的UI组件,用于在网页上创建交互式的日期选择器。下面将详细讨论这个主题。 一、jQuery日期控件的基本概念 jQuery日期控件是一种用户界面元素,允许...

    jQuery年月日三级联动(生日)插件

    "jQuery年月日三级联动(生日)插件"就是为了简化这一过程而设计的,它使得用户能更直观、高效地选择日期,提高了用户体验。这个插件通过将年、月、日分别作为三个下拉菜单,实现联动效果,即用户在选择一个年份后,...

    多功能jQuery日期控件 jeDate

    **jeDate:一款高效实用的jQuery日期控件** 在网页开发中,日期控件是必不可少的元素之一,它能够帮助用户方便地选择日期,提高用户体验。jeDate是一款专为jQuery设计的多功能日期控件,其设计目标是为开发者提供一...

    省市联动+日期选择,.net+jquery

    在.NET框架下,结合jQuery和JavaScript技术,可以创建出高效、友好的用户界面,其中“省市联动”和“日期选择”是常见的功能需求,尤其在用户注册页面中尤为重要。这两个功能提高了用户输入的便捷性和准确性,提升了...

    jQuery制作简洁漂亮日期日历控件包含多选日期等

    本教程将详细讲解如何利用jQuery技术制作一款简洁且功能强大的日期日历控件,该控件支持多选日期,允许用户方便地选择开始和结束时间。这种控件的应用场景广泛,例如在预订系统、事件安排或数据分析中,可以极大地...

    jQuery带日期区间的日期选择插件

    4. **事件监听**:插件提供了丰富的事件接口,如日期改变、区间选择完成等,便于进行联动操作和数据处理。 5. **API控制**:开发者可以通过JavaScript API来初始化、设置或获取日期,实现动态控制。 ### 使用方法 ...

Global site tag (gtag.js) - Google Analytics