Example analysis of php+MySql+Ajax realizing year, month and day linkage function-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Example analysis of php+MySql+Ajax realizing year, month and day linkage function

Sep 16, 2017 am 09:43 AM

php

PHP+MySql+Ajax realizes three-level linkage of year, month and day

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

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

Copy after login

The effect is as shown below:

The above is the detailed content of Example analysis of php+MySql+Ajax realizing year, month and day linkage function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn