JavaScriptで、プルダウンを使って、うるう年判定を作りたい

Question

うるう年判定を作りたい

JavaScriptで、閏年かどうかを判定するプルダウンを作りたいです。
プルダウンでうるう年の２月を選択すると、２９日が出てきます。
その後に別の月を入力すると３０日や31日も選択出来る様になります。
しかし、別の月を洗濯した後に２月を選択しても日数のプルダウンが29日までに戻らず、３０日や31日を選択出来る状態になっています。

仕様としては、選択している西暦と月のデータによって、選択できる日数が変わる様にしたい。
具体的には、「閏年の２月は29日まで選択できるが、それ以外の２月は28日までしか選択出来ない」とか
「４月や6月など３０日までしか日数がない月を選択した場合は、30日までしかプルダウンされない」など。

該当のソースコード

const monthCheck = function(){
    var year_value = document.getElementById("year").value;
    var month_value = document.getElementById("month").value;
    year_value = parseInt(year_value);
    month_value = parseInt(month_value);
    
    if(year_value%4 == 0 && month_value　== 2 ){                   //閏年
        for(var i=1; i<30; i++){
            document.form_signin.day.options[i] = new Option(i+"日", i); 
        }
    }else if(month_value == (1||3||5||7||8||10||12) ){  //３１日の月
        for(var i=1; i<32; i++){
            document.form_signin.day.options[i] = new Option(i+"日", i);
        }
    }else if(month_value == 2 ){                              //閏年じゃない2月
        for(var i=1; i<29; i++){
            document.form_signin.day.options[i] = new Option(i+"日", i);
        }
    }else{                                                    //30日の月
        for(var i=1; i<31; i++){
            document.form_signin.day.options[i] = new Option(i+"日", i);
        }
    }
}

<form name="form_signin">
                          <select name="birthday" id="year" onchange="monthCheck()" >
                                <option value="1">--西暦--</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>
                                <option value="1991">1991年</option>
                                <option value="1992">1992年</option>
                                <option value="1993">1993年</option>
                                <option value="1994">1994年</option>
                                <option value="1995">1995年</option>
                                <option value="1996">1996年</option>
                                <option value="1997">1997年</option>
                                <option value="1998">1998年</option>
                                <option value="1999">1999年</option>
                                <option value="2000">2000年</option>
                                <option value="2001">2001年</option>
                                <option value="2002">2002年</option>
                                <option value="2003">2003年</option>
                                <option value="2004">2004年</option>
                                <option value="2005">2005年</option>
                                <option value="2006">2006年</option>
                                <option value="2007">2007年</option>
                                <option value="2008">2008年</option>
                                <option value="2009">2009年</option>
                                <option value="2010">2010年</option>
                                <option value="2011">2011年</option>
                                <option value="2012">2012年</option>
                                <option value="2013">2013年</option>
                                <option value="2014">2014年</option>
                                <option value="2015">2015年</option>
                        </select>

                        <select name="birthday" id="month" onchange='monthCheck(this.selectedIndex)' >  
                            <option value="0">-月-</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>
                        </select>
                        <select name="birthday" id="day" >
                            <option value="0">-日-</option>
                        </select>
</form>

よろしくお願いします！！！

Answer 1

document.form_signin.dayのoptionを毎回空にしてからoption作ればできそうに思うのですが、いかがでしょうか。
今のままだと作りっぱなしで破棄してないので最大の31を作ったらそこからそれ以下にはならないようになっています。

Comments

[Beginnerrr]

早速のお返事有難うございます。
私はまだ未熟者で、optionを毎回空にする方法が分かりません。
自分なりに考えて、29以上の日数を毎回削除する様に、以下のコードに書き換えたのですが、上手くいきません。
差し支えなければ、optionを毎回空にする方法を教えて頂けないでしょうか？

```
const monthCheck = function(){
var year_value = document.getElementById("year").value;
var month_value = document.getElementById("month").value;
year_value = parseInt(year_value);
month_value = parseInt(month_value);

if(year_value%4 == 0 && month_value　== 2 ){ //閏年
for(var i=1; i<30; i++){
document.form_signin.day.options[31] = null;
document.form_signin.day.options[32] = null;
document.form_signin.day.options[i] = new Option(i+"日", i);
}
}else if(month_value == (1||3||5||7||8||10||12) ){ //３１日の月
for(var i=1; i<32; i++){
document.form_signin.day.options[i] = new Option(i+"日", i);
}
}else if(month_value == 2 ){ //閏年じゃない2月
for(var i=1; i<29; i++){
document.form_signin.day.options[30] = null;
document.form_signin.day.options[31] = null;
document.form_signin.day.options[32] = null;
document.form_signin.day.options[i] = new Option(i+"日", i);
}
}else{ //30日の月
for(var i=1; i<31; i++){
document.form_signin.day.options[32] = null;
document.form_signin.day.options[i] = new Option(i+"日", i);
}
}
}

```

[m.ts10806]

removeChildしてください。
https://www.softel.co.jp/blogs/tech/archives/191
の「おまけ」参照。

[Beginnerrr]

有難うございます。
お陰様で、解決出来ました。
心から感謝いたします、本当に有難うございました。

[m.ts10806]

removeChild使われたということですよね？
解決できたようで何よりです。

[Beginnerrr]

はい。
if文の前に以下のコードを記入しました。

var x = document.form_signin.day;
if (x.hasChildNodes()) {
while (x.childNodes.length > 0) {
x.removeChild(x.firstChild)
}
}

[m.ts10806]

はい。それで問題ないと思います。
ただ、同じ方法を表現するのにやり方は1つではありませんし、
もっとシンプルに書けるやり方もあるでしょうし、あえてすごく複雑に書いてみるというのもあるかと思います。
1つの結果に対して色々なやり方を試してみて、自分なりのやり方を確立していってください。「これが絶対の正解」というのはありませんので。

[Beginnerrr]

ご指摘有難うございます！
まだ始めたばかりの初心者なので、上記の様なコードしか書けませんが、もっと綺麗に書ける様に頑張ります！

Answer 2

たとえばこうします

window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('#y,#m'),function(x){
    x.addEventListener('change',function(e){
      var y=document.querySelector('#y').value;
      var m=document.querySelector('#m').value;
      if(y==="" || m===""){
        document.querySelector('#d').selectedIndex=0;
        document.querySelector('#d').disabled=true;
      }else{
        var dd=new Date(y+"-"+m+"-1");
        dd.setMonth(dd.getMonth()+1);
        dd.setDate(0);
        [].forEach.call(document.querySelector('#d').options,function(x){
          var flg=x.value!=="" && x.value>dd.getDate();
          x.style.display=flg?"none":"";
        });
        if(document.querySelector('#d').value>dd.getDate()){
          document.querySelector('#d option[value="'+dd.getDate()+'"]').selected=true;
        }
        document.querySelector('#d').disabled=false;
      }
    });
  });
});

※微調整しました

<form name="form_signin">
<select name="y" id="y">
<option value="">--西暦--</option>
<option value="2010">2010年</option>
<option value="2011">2011年</option>
<option value="2012">2012年</option>
<option value="2013">2013年</option>
<option value="2014">2014年</option>
<option value="2015">2015年</option>
</select>
<select name="m" id="m">  
<option value="">-月-</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>
</select>
<select name="d" id="d" disabled>
<option value="">-日-</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>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</form>

Comments

[yambejp]

うるう年の判定は深く考えないことです。
ようは年と月が決まれば、その翌月１日の1日前がその月の月末最終日になるので
それ以外の条件は不要です

[Beginnerrr]

すみません、私が未熟者過ぎて、yambejpさんの説明が全く理解出来ていません。
良ければもう少し分かりやすく教えて頂けないでしょうか？

[yambejp]

たとえば2011年の2月を選ぶとします
その翌月の1は2011/3/1ですよね？その1日前は2011/2/28です。
よって1～28日を表示すればよいということです。
閏年であれば2012/3/1の1日前がかっってに2012/2/29となるので
変な条件をいろいろ考える必要がないということ

[Beginnerrr]

yambejpさん
早速のお返事ありがとうございます。
今回は、mts10806さんをベストアンサーにさせて頂きます。
yambejpさんに落ち度はありません。
具体的なコードを見せて頂いたという点では、圧倒的に親切な対応をして頂いたと感じております。
ただ、私が未熟者過ぎて、理解出来ていない表現が沢山出てきました。
私の目下の目標としましては、自分の理解出来るコードでJavaScriptを書くことです。
mts10806さんに教えて頂いた内容は私でも理解できるものでした。

ベストアンサーにしなくて本当に申し訳ございません。
親切に対応していただいたのに心苦しいですが、どうかご理解下さい。
お時間いただき有難うございました。

[yambejp]

ベストアンサーにはこだわりがないのでほんとに気にしないでください
お役に立てれば幸いです

[Beginnerrr]

そう言っていただけて幸いです。