2017-02-22 8 views
2

月の名前を2つクリックすると、選択したボックスでその特定の月の日が必要になります...英語)選択した月の月の名前と日を選択します

enter image description here

私の月名および日数コード...()このため、他の簡単なコードをmensionください

 <form class="filterform" method="post"> 
      <select class="selectmonth" name="monthname"> 
       <option selected disabled>Select Month</option> 
       <option value="1" <?php echo ($_POST['monthname'] == '1')?"selected":"" ?> >January</option> 
       <option value="2" <?php echo ($_POST['monthname'] == '2')?"selected":"" ?> >February</option> 
       <option value="3" <?php echo ($_POST['monthname'] == '3')?"selected":"" ?> >March</option> 
       <option value="4" <?php echo ($_POST['monthname'] == '4')?"selected":"" ?> >April</option> 
       <option value="5" <?php echo ($_POST['monthname'] == '5')?"selected":"" ?> >May</option> 
       <option value="6" <?php echo ($_POST['monthname'] == '6')?"selected":"" ?> >June</option> 
       <option value="7" <?php echo ($_POST['monthname'] == '7')?"selected":"" ?> >July</option> 
       <option value="8" <?php echo ($_POST['monthname'] == '8')?"selected":"" ?> >August</option> 
       <option value="9" <?php echo ($_POST['monthname'] == '9')?"selected":"" ?> >September</option> 
       <option value="10" <?php echo ($_POST['monthname'] == '10')?"selected":"" ?> >October</option> 
       <option value="11" <?php echo ($_POST['monthname'] == '11')?"selected":"" ?> >November</option> 
       <option value="12" <?php echo ($_POST['monthname'] == '12')?"selected":"" ?> >December</option> 
      </select> 

      <select class="selectday" name="dayname"> 
       <option value="0" selected disabled>Select Day</option> 
       <option value="1" <?php echo ($_POST['dayname'] == '1')?"selected":"" ?>>1</option> 
       <option value="2" <?php echo ($_POST['dayname'] == '2')?"selected":"" ?>>2</option> 
       <option value="3" <?php echo ($_POST['dayname'] == '3')?"selected":"" ?>>3</option> 
       <option value="4" <?php echo ($_POST['dayname'] == '4')?"selected":"" ?>>4</option> 
       <option value="5" <?php echo ($_POST['dayname'] == '5')?"selected":"" ?>>5</option> 
       <option value="6" <?php echo ($_POST['dayname'] == '6')?"selected":"" ?>>6</option> 
       <option value="7" <?php echo ($_POST['dayname'] == '7')?"selected":"" ?>>7</option> 
       <option value="8" <?php echo ($_POST['dayname'] == '8')?"selected":"" ?>>8</option> 
       <option value="9" <?php echo ($_POST['dayname'] == '9')?"selected":"" ?>>9</option> 
       <option value="10" <?php echo ($_POST['dayname'] == '10')?"selected":"" ?>>10</option> 
       <option value="11" <?php echo ($_POST['dayname'] == '11')?"selected":"" ?>>11</option> 
       <option value="12" <?php echo ($_POST['dayname'] == '12')?"selected":"" ?>>12</option> 
       <option value="13" <?php echo ($_POST['dayname'] == '13')?"selected":"" ?>>13</option> 
       <option value="14" <?php echo ($_POST['dayname'] == '14')?"selected":"" ?>>14</option> 
       <option value="15" <?php echo ($_POST['dayname'] == '15')?"selected":"" ?>>15</option> 
       <option value="16" <?php echo ($_POST['dayname'] == '16')?"selected":"" ?>>16</option> 
       <option value="17" <?php echo ($_POST['dayname'] == '17')?"selected":"" ?>>17</option> 
       <option value="18" <?php echo ($_POST['dayname'] == '18')?"selected":"" ?>>18</option> 
       <option value="19" <?php echo ($_POST['dayname'] == '19')?"selected":"" ?>>19</option> 
       <option value="20" <?php echo ($_POST['dayname'] == '20')?"selected":"" ?>>20</option> 
       <option value="21" <?php echo ($_POST['dayname'] == '21')?"selected":"" ?>>21</option> 
       <option value="22" <?php echo ($_POST['dayname'] == '22')?"selected":"" ?>>22</option> 
       <option value="23" <?php echo ($_POST['dayname'] == '23')?"selected":"" ?>>23</option> 
       <option value="24" <?php echo ($_POST['dayname'] == '24')?"selected":"" ?>>24</option> 
       <option value="25" <?php echo ($_POST['dayname'] == '25')?"selected":"" ?>>25</option> 
       <option value="26" <?php echo ($_POST['dayname'] == '26')?"selected":"" ?>>26</option> 
       <option value="27" <?php echo ($_POST['dayname'] == '27')?"selected":"" ?>>27</option> 
       <option value="28" <?php echo ($_POST['dayname'] == '28')?"selected":"" ?>>28</option> 
       <option value="29" <?php echo ($_POST['dayname'] == '29')?"selected":"" ?>>29</option> 
       <option value="30" <?php echo ($_POST['dayname'] == '30')?"selected":"" ?>>30</option> 
       <option value="31" <?php echo ($_POST['dayname'] == '31')?"selected":"" ?>>31</option> 
      </select> 

      <button class="showbtn" name="showbtn" type="submit">Show</button> 

     </form> 
+0

チェックこのライブラリを想定しています。 https://github.com/tyea/dobpicker デモ:http://www.jqueryscript.net/demo/Minimalist-jQuery-Plugin-For-Birthday-Selector-DOB-Picker/ これはあなたが望むものだと思います!!! –

答えて

4

(ちょうどその上のコードの下にペーストをコピー)このスクリプトを追加してください - 注意:現在の年が2017 JS FIDDLE https://jsfiddle.net/sooraz2/f4hb0b5d/

$('.selectmonth').on('change', function(){ 

var year = new Date().getFullYear(); 

var month = $(this).val(); 


    var totalDays = new Date(year, month, 0).getDate(); 

    var options = '<option value="0">Select Day</option>'; 

    for (var i = 1; i <= totalDays; i++) { 

    options+= '<option value="'+i+'">'+i+'</option>'; 

} 

    $('.selectday').html(options); 
}) 


    var MonthsValue = "<?php $_POST['monthname'] ?>"; 
    var DayValue = "<?php $_POST['dayname'] ?>"; 


$(function(){ 

    $('.selectmonth option[value='+MonthsValue+']').prop('selected', true); 
    $('.selectmonth').trigger('change') 
    $('.selectday option[value='+DayValue+']').prop('selected', true); 

}) 
+0

それは良いです。より便利になるようにリンク例を追加してください。良い答えのためのBTW +1 –

+0

ありがとう、リンク?あなたはjsfiddleを意味しますか? – Sooraz

+0

はい、BTWスタック自体はhtml + css + javascriptのコーディングを追加する方法を提供します。 回答エディタのオプションを確認して、 –

0

この方法を試してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>untitled</title> 
<script type="text/javascript"> 

var numDays = { 
       '1': 31, '2': 28, '3': 31, '4': 30, '5': 31, '6': 30, 
       '7': 31, '8': 31, '9': 30, '10': 31, '11': 30, '12': 31 
       }; 

function setDays(oMonthSel, oDaysSel, oYearSel) 
{ 
    var nDays, oDaysSelLgth, opt, i = 1; 
    nDays = numDays[oMonthSel[oMonthSel.selectedIndex].value]; 
    if (nDays == 28 && oYearSel[oYearSel.selectedIndex].value % 4 == 0) 
     ++nDays; 
    oDaysSelLgth = oDaysSel.length; 
    if (nDays != oDaysSelLgth) 
    { 
     if (nDays < oDaysSelLgth) 
      oDaysSel.length = nDays; 
     else for (i; i < nDays - oDaysSelLgth + 1; i++) 
     { 
      opt = new Option(oDaysSelLgth + i, oDaysSelLgth + i); 
        oDaysSel.options[oDaysSel.length] = opt; 
     } 
    } 
    var oForm = oMonthSel.form; 
    var month = oMonthSel.options[oMonthSel.selectedIndex].value; 
    var day = oDaysSel.options[oDaysSel.selectedIndex].value; 
    var year = oYearSel.options[oYearSel.selectedIndex].value; 
    oForm.hidden.value = month + '/' + day + '/' + year; 
} 

</script> 
</head> 
<body> 
<form> 
<select name="month" id="month" onchange="setDays(this,day,year)"> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option> 
</select> 
<select name="day" id="day" onchange="setDays(month,this,year)"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select> 
<select name="year" id="year" onchange="setDays(month,day,this)"> 
<option value="1944">1944</option> 
<option value="1945">1945</option> 
<option value="1946">1946</option> 
<option value="1947">1947</option> 
<option value="1948">1948</option> 
<option value="1949">1949</option> 
<option value="1950">1950</option> 
<option value="1951">1951</option> 
<option value="1952">1952</option> 
<option value="1953">1953</option> 
<option value="1954">1954</option> 
<option value="1955">1955</option> 
<option value="1956">1956</option> 
<option value="1957">1957</option> 
<option value="1958">1958</option> 
<option value="1959">1959</option> 
<option value="1960">1960</option> 
<option value="1961">1961</option> 
<option value="1962">1962</option> 
<option value="1963">1963</option> 
<option value="1964">1964</option> 
<option value="1965">1965</option> 
<option value="1966">1966</option> 
<option value="1967">1967</option> 
<option value="1968">1968</option> 
<option value="1969">1969</option> 
<option value="1970">1970</option> 
<option value="1971">1971</option> 
<option value="1972">1972</option> 
<option value="1973">1973</option> 
<option value="1974">1974</option> 
<option value="1975">1975</option> 
<option value="1976">1976</option> 
<option value="1977">1977</option> 
<option value="1978">1978</option> 
<option value="1979">1979</option> 
<option value="1980">1980</option> 
<option value="1981">1981</option> 
<option value="1982">1982</option> 
<option value="1983">1983</option> 
<option value="1984">1984</option> 
<option value="1985">1985</option> 
<option value="1986">1986</option> 
<option value="1987">1987</option> 
<option value="1988">1988</option> 
<option value="1989">1989</option> 
<option value="1990">1990</option> 
</select> 
<input type="text" name="hidden" value="" /> 
</form> 
</body> 
</html> 
+1

閏年はどうですか?? –

関連する問題