PHP+MySql+Ajax实现年月日的三级联动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <style>
        #year{
            width: 100px;
        }
        #month{
            width: 100px;
        }
        #day{
            width: 100px;
        }
        .main{
            width: 300px;
            height: 50px;
        }
    </style>
    <body>      
        <div style="margin-left: 600px; margin-top: 200px;">
        <h2>请选择日期</h2>        
        <input type="text" class="form-control main" id="content" placeholder="请输入日期时间" data-toggle="modal" data-target="#myModal">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">日期时间选择</h4>
                    </div>
                    <div class="modal-body">
                        //添加下拉列表
                        <div class="time">
                            <select id="year"></select>
                            <select id="month"></select>
                            <select id="day"></select>
                        </div>                        
                                                
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="ck">
                        确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>       
  </body>
    <script>
        $(document).ready(function(e){　　//加载页面数据
            Loadyear();　　//加载年
            Loadmonth();    //加载月
            Loadday();　　//加载天
            $("#year").click(function(){　　//获取年的点击事件
                Loadmonth();　　//重新加载月
                Loadday();　　    //重新加载天
            })
            $("#month").click(function(){　　//获取月的点击事件
                Loadday();　　//重新加载天
            })
            $("#ck").click(function(){        //按钮点击事件,将选择的年月日传到文本框   
                Load();　　//赋给文本框值
                
            })
        })
            //加载年
        function Loadyear(){
                var current = new Date();
                var year_cur = current.getFullYear();
                var str = "";
                for(var i=year_cur-5;i<=year_cur+5;i++){                   
                    str = str+"<option>"+i+"</option>";             
            }
                $("#year").html(str);
        }
        //加载月
        function Loadmonth(){
                var current = new Date();
                var str = "";
                for(i=1;i<=12;i++){        
                    str = str+"<option>"+i+"</option>";                
            }
                $("#month").html(str);
        }
        //加载文本框的值
        function Load(){
            var current = new Date();
                var y = $("#year").val();
                var m = $("#month").val();
                var d = $("#day").val();
                var s = y+"年"+m+"月"+d+"日"+"/"+current.getHours() + ":" + current.getMinutes() + ":" + current.getSeconds();                            
                $("#content").val(s);    
        }
        //加载天
        function Loadday(){
            var year = $("#year").val();
            var month = $("#month").val();
            
            var month = $("#month").val();
            if(month==4 || month==6 || month==9 || month==11){
                add_day(30);
            }else if(month==2){
                if(year%4==0 && year%100!=0 || year%400==0){
                    add_day(29);
                }else{
                    add_day(28);
                }
            }else{
                    add_day(31);                
        }
    }
        function add_day(i_max){
            var str = "";
            for(i=1;i<=i_max;i++){
                str = str+"<option value='"+i+"'>"+i+"</option>";
            }
            $("#day").html(str);
        }
    </script>

效果如图：

</html>

利用PHP+MySql+Ajax操作实现年月日联动功能的更多相关文章

  1. 利用jquery对ajax操作，详解原理（附代码）

    1. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selecto ...

  2. 3、尚硅谷_SSM高级整合_使用ajax操作实现删除的功能

    点击删除的时候,要删除联系人,这里同点击编辑按钮一样给删除按钮添加点击事件的时候不能使用 $(".delete_btn").click(function(){ }); 这种方式,因 ...

  3. MySQL联接操作

    在MySQL中,联接是一种对表的引用, 多表联接类型: 1．笛卡尔积(交叉联接):在MySQL中为CROSS JOIN或省略JOIN,如: select * from course, teachcou ...

  4. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  5. 一个简单的样例看明确怎样利用window.location.hash实现ajax操作时浏览器的前进/后退功能

    我们知道JavaScript中非常早就提供了window.history对象,利用history对象的forward().go().back()方法可以方便实现不同页面之间的前进.后退等这样的导航功能 ...

  6. 前端笔记之服务器&Ajax（中）MySQL基础操作&PHP操作数据库&Ajax

    一.数据库基础 1.1什么是数据库? 什么是数据库? 答:就是一个很大的一个文件,只不过这个文件可以通过一些‘命令’操作数据: 增.删.改.查数据: 数据库等于持久数据和数据操作的一个统称. 数据库是 ...

  7. Ajax 案例之三级联动

    每次在博客园网站写博客,格式真的好难搞,还望好心人告知更好的编辑工具.接下来进入正题:三级联动(其效果演示可看我的博文Ajax 学习总结 末尾). 数据表设计(Oracle) 新建数据表 Employ ...

  8. MySQL误操作后如何快速恢复数据

    基本上每个跟数据库打交道的程序员(当然也可能是你同事)都会碰一个问题,MySQL误操作后如何快速回滚?比如,delete一张表,忘加限制条件,整张表没了.假如这还是线上环境核心业务数据,那这事就闹大了 ...

  9. MYSQL基础操作

    MYSQL基础操作 [TOC] 1.基本定义 1.1.关系型数据库系统 关系型数据库系统是建立在关系模型上的数据库系统 什么是关系模型呢? 1.数据结构可以规定,同类数据结构一致,就是一个二维的表格 ...

随机推荐

  1. 20165223 week3蓝墨云测试总结

    1. 表达式0xaa | 0x55的值为 答案: 解析: 0xaa用二进制表示为10101010,0x55用二进制表示为01010101,按位或后为11111111,十进制表示为255,十六进制表示为 ...

  2. nodejs的某些api~（二）crypto加密模块

    就随便写写crypto模块,加密在node里面挺重要的,特别是密码,用户名都用crypto加密,在我写的那个作品里面,用户名密码的存储都是用crypto加密的,也没有深究里面的内容,想深究的同学可以看 ...

  3. POJ--1056 IMMEDIATE DECODABILITY && POJ--3630 Phone List（字典树）

    题目链接 题目大意 看输入的每个字符串中是否有一个字符串是另一个字符串的前缀 #include<iostream> #include<cstring> #include< ...

  4. maven将项目及第三方jar打成一个jar包

    pom.xml中添加如下配置 把依赖包和自己项目的文件打包如同一个jar包(这种方式对spring的项目不支持) <build> <plugins> <plugin> ...

  5. Sublime Text3—软件安装、package control插件管理

    一.简介 市面上的编辑器纷繁复杂各有优点,好用的编辑器能让你工作事半功倍,先简单介绍下本文主角Sublime Text编辑器,下面简称Sublime. 1.可用于 Windows.Mac OS X 和 ...

  6. 安卓和java开发环境的安装

    java配置安卓需要,sdk,jdk(java),adt,eclipse 对于jdk的配置和安装: 1 卸载原来的jdk,重新配置环境变量只需要:在系统变量中把新的jdkJ安装路径写到“JAVA_HO ...

  7. HDU 1079 Calendar Game （博弈）

    Calendar Game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  8. qml: 模块定义与使用

    1. 模块的定义qmldir Module   MyModule MyTest  1.0  MyTest.qml MyTest  1.3  MyTest.qml 2. 导入: 使用qrc: RESOU ...

  9. Http如何利用304让浏览器去更新数据

    ETag 是 Entity Tag 的缩写,中文译过来就是实体标签的意思.在HTTP1.1协议中其实就是请求HEAD中的一个属性而已. HTTP/1.1 200 OK Date: Mon, 23 Ma ...

  10. python css功能补充讲解

    ###########总结#### 标签选择器 标签名     id选择器  #box1   类选择器.box2 css高级选择器 *子选择器* 子选择器用 大于号 .box1>.box2{ w ...