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. Mysql 系统表

    Information_schema: 1. tables 提供表信息: 表所属数据库,表名,表类型,行数,最大自增数等等.

  2. CentOS装个NTP时间同步服务器

    服务端: driftfile /var/lib/ntp/drift restrict default nomodify notrap nopeer noquery restrict 127.0.0.1 ...

  3. Spring Boot 1.X和2.X优雅重启实战

    纯洁的微笑 今天 项目在重新发布的过程中,如果有的请求时间比较长,还没执行完成,此时重启的话就会导致请求中断,影响业务功能,优雅重启可以保证在停止的时候,不接收外部的新的请求,等待未完成的请求执行完成 ...

  4. 【POJ2676】sudoku 搜索

    按照每一行每一列去填数,当填到每一行的第9列时,开始填下一行. 代码如下: #include <cstdio> #include <algorithm> #include &l ...

  5. Django（五）框架之模板继承和静态文件配置

    https://www.cnblogs.com/haiyan123/p/7731959.html 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% end ...

  6. gradle的安装配置成功标志

    gradle主要位于AndroidStudio中 看我的目录 在环境变量里添加用户变量 GRADLE_HOME 然后在环境变量 path 中增加 %GRADLE_HOME%\bin;,如图所示 测试配 ...

  7. python3+django2 开发易语言网络验证（下）

    第六步:网络验证服务器端项目上线部署 功夫不负有心人,终于部署成功啦! 前期准备: 项目名:netauth 系统:百度云服务器下的Ubuntu16.4 软件:xshell(无论如何想办法用这个跟服务器 ...

  8. Tomcat内存监控及调优

    JDK(1.6版本以上)自带有个jvisualvm工具.该工具是用来监控java运行程序的cpu.内存.线程等的使用情况.并且使用图表的方式监控java程序.还具有远程监控能力. 界面如下: 1.JD ...

  9. Lucas定理学习笔记（没有ex_lucas）

    题目链接\(Click\) \(Here\) \(ex\_lucas\)实在是不能学的东西...简单学了一下\(Lucas\)然后打算就这样鸽着了\(QwQ\)(奶一口不可能考) 没什么复杂的,证明的 ...

  10. CentOS7用阿里云Docker Yum源在线安装Docker 17.03.2

        参考文档 安装步骤 删除已安装的Docker 配置阿里云Docker Yum源 安装指定版本 启动Docker服务 参考文档 官方Docker安装文档:https://docs.docker. ...