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. 选做题：设计并实现一个Book类

    目录 题目分析 设计思路 具体代码 测试代码 运行截图 参考资料 题目分析 题目内容 0.设计并实现一个Book类,定义义成Book.java,Book 包含书名,作者,出版社和出版日期 1.这些数据 ...

  2. Dos 批处理 Shutdown

    第一步: win + R,打开"运行" 第二步: 输入cmd 第三步: 输入color a或color b改成自己喜欢的颜色 第四步: 在shutdown后面输入不同的命令达到不同 ...

  3. Surface Pro 4 系统优化全教程及QA

    甲.如何根据你的需求选择相应版本的surface1.Core M3-6Y30,Core i5-6300U,Core i7-6650U的性能差距有多大?2.HD 515,HD520,Iris 540的性 ...

  4. VSCode删除重复的空行

    输入^\s\n 选择使用正则表达式

  5. JavaScript（JS）之Javascript对象DOM（三）

    https://www.cnblogs.com/haiyan123/p/7598320.html 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) ...

  6. Java IO流篇

    什么是IO流 思考问题 如何读写文件? 解决--通过流读写文件 流是指一连串流动的字符,以先进先出传输信息的通道. Java操控硬盘上的文件,通过IO流来实现 Java流的分类 按流向区分 ---输出 ...

  7. rabbitMQ使用一——helloworld

    参考链接 :https://blog.csdn.net/zhulongxi/article/details/72867545 https://www.cnblogs.com/ericli-ericli ...

  8. Codeforces Round #523 (Div. 2) B Views Matter

    传送门 https://www.cnblogs.com/violet-acmer/p/10005351.html 这是一道贪心题么???? 题意: 某展览馆展览一个物品,此物品有n堆,第 i 堆有a[ ...

  9. PV、UV、UIP、VV、CPC、CPM、RPM、CTR解释

    PV.UV.UIP.VV.CPC.CPM.RPM.CTR 具体解释 PV:Page View,页面访问量,也就是曝光量. UV:Unique Visitor,独立访客数,同一个访问多次访问也只算1个访 ...

  10. 数据挖掘的标准流程-CRISP-DM

    1.起源 CRISP-DM (cross-industry standard process for data mining), 即为"跨行业数据挖掘过程标准".此KDD(know ...