select tag events not firing more than 2 times

2019-09-13 02:38发布

站内问答 / JavaScript
810 2 4

i have made three drop downs month year day{1,2,3...} i want only valid day gets displayed in the drop down. i.e if jan is selected 31 is the upper limit if feb is selected 28 or 29 depending upon the year (leap or not) 

var monthselected,yearselected,mtype=0,visited=0;
function reassembleDate(){
if(monthselected==4||monthselected==6||monthselected==9||monthselected==11)
                            {mtype=30;}
                        if(monthselected==2&&isleapyear(yearselected))
                            {mtype=29;}
                        if(monthselected==2&&!isleapyear(yearselected))
                            {mtype=28;}

                        else if(mtype==0){mtype=31;} 
                            removeOptions();
                           addOptions(mtype);}                          
function removeOptions(){
var x=document.getElementById('dayselect');
while(x.length>29)
    { x.remove(x.length-1);}
    }

function addOptions(mtype)
{
//alert('initialising');
var i;
for(i=29;i<=mtype;i++)
{
var x=document.getElementById("dayselect");
    var option=document.createElement("option");

option.text=i;
try
  {//alert('trying');
  // for IE earlier than version 8
  x.add(option,x.options[null]);
  }
catch (e)
  {//alert('catching');
  x.add(option,null);
  }
}
}                           
function isleapyear(year){
        if((year%4)==0)
        {
        if((year%100)!=0)
        {
        return true;
        }
        else return false;
        }
        if((year%400)==0)
            {

            return true;

            }

else return false;
}                       







<td><select  id="month" name="month" class="int" onChange="reassembleDate();"   onBlur="monthselected=document.getElementById('month').value; reassembleDate();"        >
                        <option value="">Month</option>
                        <option value="01" >January</option>
                        <option value="02" >  February</option>
                        <option value="03" >  March</option>
                        <option value="04" >  April</option>
                        <option value="05" >  May</option>
                        <option value="06" >  June</option>
                        <option value="07" >  July</option>
                        <option value="08" >  August</option>
                        <option value="09" >  September</option>
                        <option value="10" >  October</option>
                        <option value="11" >  November</option>
                        <option value="12" >  December</option>
                        </select>

<label id="year-label" class="year int">  Year</label>
  <select class="int" id="year" name="year" onChange="reassembleDate();" onBlur="yearselected=document.getElementById('year').value; reassembleDate();"><option value="0" >YYYY</option>
<?php for($i=2012;$i>1912;$i--){echo "<option value=\"$i\">$i</option>";} ?>            </select>
<label id="day-label" class="day int">Day</label><select id="dayselect" class="int" name="day" >
<option value="0" >  DD</option>
<?php for($i=1;$i<29;$i++){echo "<option value=\"$i\">$i</option>";} ?></select>

the code works fine when there are upto two changes but after that the list of date{1,2,3...} does not change.Why is this happening? I have tried changing dates on all events like onChange and onBlur it does not help.

the generated html 

Birthday</td><td><select  id="month" name="month" class="int" onChange="reassembleDate();"  onBlur="monthselected=document.getElementById('month').value; reassembleDate();"        >
                        <option value="">Month</option>
                        <option value="01" >January</option>
                        <option value="02" >  February</option>
                        <option value="03" >  March</option>
                        <option value="04" >  April</option>
                        <option value="05" >  May</option>
                        <option value="06" >  June</option>
                        <option value="07" >  July</option>
                        <option value="08" >  August</option>
                        <option value="09" >  September</option>
                        <option value="10" >  October</option>
                        <option value="11" >  November</option>
                        <option value="12" >  December</option>
                        </select>

                        <label id="year-label" class="year int">
  Year</label>
  <select class="int" id="year" name="year" onChange="reassembleDate();" onBlur="yearselected=document.getElementById('year').value; reassembleDate();"><option value="0" >YYYY</option>
                                <option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option><option value="1917">1917</option><option value="1916">1916</option><option value="1915">1915</option><option value="1914">1914</option><option value="1913">1913</option>                                                                            </select>

                        <label id="day-label" class="day int">Day   </label><select id="dayselect" class="int" name="day" >


                                <option value="0" >  DD</option>
                                <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>                                          </select>




<div id="bday-h" class="helptext int" style="display:inline">Select appropriate values</div>                                                                        </td>

2条回答
霸刀☆藐视天下
2楼-- · 2019-09-13 02:56

Here is the working script:

Issues:

The value of the month / year is not recalculated during onchange(). Issue with the check for calculating days in the month.

var monthselected,yearselected,mtype=0,visited=0;

function reassembleDate(){

    monthselected = parseInt(document.getElementById('month').value);
    yearselected = parseInt(document.getElementById('year').value); 

    if(monthselected == "" || yearselected == "0") {
        return;
    }

    if(monthselected==4||monthselected==6||monthselected==9||monthselected==11)
        {mtype=30;}
    else if(monthselected==2&&isleapyear(yearselected))
        {mtype=29;}
    else if(monthselected==2&&!isleapyear(yearselected))
        {mtype=28;}
    else
        {mtype=31;} 

    removeOptions();
    addOptions(mtype);
}

function removeOptions(){
    var x=document.getElementById('dayselect');
    while(x.length>28)
    { 
        x.remove(x.length-1);
    }
}

function addOptions(mtype) {
    //alert('initialising');
    var i;
    for(i=29;i<=mtype;i++)
    {
        var x=document.getElementById("dayselect");
        var option=document.createElement("option");

        option.text=i;
        try
          {//alert('trying');
          // for IE earlier than version 8
          x.add(option,x.options[null]);
          }
        catch (e)
          {//alert('catching');
          x.add(option,null);
          }
    }
}             

function isleapyear(year){
    if((year%4)==0)
    {
        if((year%100)!=0)
        {
            return true;
        }
        else return false;
    }

    if((year%400)==0)
    {
        return true;
    }

    else return false;
}
查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2019-09-13 03:12

The answer provided is good, with one exception. The year 2000 returns as not being a leap year because it returns true/false before you check whether the year is divisible by 400. Here's a fixed version. As well, I have it removing all of the numbers because it was duplicating the 29 sometimes. Instead, I have it stripping all of the numbers out, adding a beginning placeholder of "--" and then fully populating the box based on the month. Hope this helps. :-)

<script type="text/javascript">
var monthselected,yearselected,mtype=0,visited=0;

function reassembleDate(){

    monthselected = parseInt(document.getElementById('month').value);
    yearselected = parseInt(document.getElementById('year').value); 

    if(monthselected == "" || yearselected == "0") {
        return;
    }

    if(monthselected==4||monthselected==6||monthselected==9||monthselected==11)
        {mtype=30;}
    else if(monthselected==2&&isleapyear(yearselected))
        {mtype=29;}
    else if(monthselected==2&&!isleapyear(yearselected))
        {mtype=28;}
    else
        {mtype=31;} 

    removeOptions();
    addOptions(mtype);
}

function removeOptions(){
    var x=document.getElementById('dayselect');
    while(x.length>0)
    { 
        x.remove(x.length-1);
    }
}

function addOptions(mtype) {
    //alert('initialising');
    var x=document.getElementById("dayselect");
    var option=document.createElement("option");
    option.text='--';
    try
      {//alert('trying');
      // for IE earlier than version 8
      x.add(option,x.options[null]);
      }
    catch (e)
      {//alert('catching');
      x.add(option,null);
      }
    var i;
    for(i=1;i<=mtype;i++)
    {
        var x=document.getElementById("dayselect");
        var option=document.createElement("option");

        option.text=i;
        try
          {//alert('trying');
          // for IE earlier than version 8
          x.add(option,x.options[null]);
          }
        catch (e)
          {//alert('catching');
          x.add(option,null);
          }
    }
}             

function isleapyear(year){
    if((year%400)==0)
    {
        return true;
    }

    if((year%4)==0)
    {
        if((year%100)!=0)
        {
            return true;
        }
        else return false;
    }

    else return false;
}   
</script>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)