LoginSignup
0
0

More than 3 years have passed since last update.

jQueryで年月のプルダウンを生成する

Last updated at Posted at 2020-01-24

こんなかんじのプルダウンを作成します。

<select>
    <option value="">選択する</option>
</select>
<!--jQueryはCDNを使用-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){
//英語の月を配列にする
var m_eng = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var today=new Date();
//現在の年月を文字列の状態で取得する(例:20201)
var now_date = String(today.getFullYear()) + String((today.getMonth() +1));
//現在の年月が5文字(例:20201~20209)の場合、月を01表記に整形
    if(now_date.length == 5){
    var now_date = now_date.slice(0, 4) + "0" + now_date.slice(-1);
    }
var num_date = Number(now_date);

//スタート年月を設定(今回は2019年1月)
var onset = 201901;

//スタート年月(onset)~現在(num_date)のプルダウンを繰り返しで生成する
while (onset <= num_date) {
    //onsetの月部分が13になった時、年に+1年、月を1月にする
    //例)201913→202001
    var set_cnv = String(onset);
        if(set_cnv.slice(-2) == 13){
        var onset = onset + 100 -12;
        var set_cnv = String(onset);
        }
        //年と月
    var set1 = set_cnv.slice(0, 4);
    var set2 = Number(set_cnv.slice(-2)) -1;

//selectにoptionタグを追加する
$('select').append(
'<option value="' + set_cnv + '">' + set1 + '[' + m_eng[set2] + ']' + '</option>');

onset++;
}

});
</script>

以下、jQueryで生成されたタグです。

<select>
    <option value="">選択する</option>
    <option value="201901">2019[Jan]</option>
    <option value="201902">2019[Feb]</option>
    <option value="201903">2019[Mar]</option>
    <option value="201904">2019[Apr]</option>
    <option value="201905">2019[May]</option>
    <option value="201906">2019[Jun]</option>
    <option value="201907">2019[Jul]</option>
    <option value="201908">2019[Aug]</option>
    <option value="201909">2019[Sep]</option>
    <option value="201910">2019[Oct]</option>
    <option value="201911">2019[Nov]</option>
    <option value="201912">2019[Dec]</option>
    <option value="202001">2020[Jan]</option>
</select>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0