質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

13277閲覧

JavaScriptで年/月のプルダウンを作成したい

amaguri

総合スコア227

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/08/31 03:36

参考デモサイト
コード

やりたいこと
2017/05
を基準にした、今月までの
年/月
がセットのプルダウンを作成したいです

参考サイトより

js

1<script> 2(function() { 3 'use strict'; 4 5 /* 6 今日の日付データを変数todayに格納 7 */ 8 var optionLoop, this_day, this_month, this_year, today; 9 today = new Date(); 10 this_year = today.getFullYear(); 11 this_month = today.getMonth() + 1; 12 this_day = today.getDate(); 13 14 /* 15 ループ処理(スタート数字、終了数字、表示id名、デフォルト数字) 16 */ 17 optionLoop = function(start, end, id, this_day) { 18 var i, opt; 19 20 opt = null; 21 for (i = start; i <= end ; i++) { 22 if (i === this_day) { 23 opt += "<option value='" + i + "' selected>" + i + "</option>"; 24 } else { 25 opt += "<option value='" + i + "'>" + i + "</option>"; 26 } 27 } 28 return document.getElementById(id).innerHTML = opt; 29 }; 30 31 32 /* 33 関数設定(スタート数字[必須]、終了数字[必須]、表示id名[省略可能]、デフォルト数字[省略可能]) 34 */ 35 optionLoop(1950, this_year, 'id_year', this_year); 36 optionLoop(1, 12, 'id_month', this_month); 37 optionLoop(1, 31, 'id_day', this_day); 38})();

この処理にて
optionLoopの年を1950から2017に変更すれば
選択できる月の変更は可能なのはわかるのですが
optionLoopの年と月を使い

年/月
が一つになった
プルダウンを作成したいのですがうまくいきません。

どうすれば実現可能でしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/08/31 04:07

そもそも現状のつくりでは「今日の日(今日なら31日)」は選択状態になっても「今日の月(今日なら8月)」は選択状態にならないはずなのですが、それはそのままでいいのでしょうか?
m.ts10806

2017/08/31 04:10

あ、8月8日とか年月同じ数字の場合は選択状態になりますね。
m.ts10806

2017/08/31 04:33

すみません。引数がthis_dayとなっているための勘違いでした。引数の受け取り側は変数名変えた方がいいかもしれませんね・・・。
guest

回答2

0

例えばこんな感じでしょうか?

javascript

1(function() { 2 'use strict'; 3 var optionLoop, this_day, this_month, this_year, today; 4 today = new Date(); 5 this_year = today.getFullYear(); 6 this_month = today.getMonth() + 1; 7 this_day = today.getDate(); 8 optionLoop = function(start_year, end_year,start_month, end_month, id, this_day) { 9 var i,j,v,opt,start_j,end_j; 10 opt = ""; 11 for (i = start_year; i <= end_year ; i++) { 12 start_j=(i == start_year)?start_month:1; 13 end_j=(i <= end_year-1)?12:end_month; 14 for (j = start_j; j <= end_j ; j++) { 15 v=i+"/"+(100+j).toString().substr(-2); 16 opt+="<option value=\""+v+"\">"+v+"</option>\n"; 17 } 18 } 19 document.getElementById(id).innerHTML = opt; 20 }; 21 optionLoop(2015, this_year, 5, this_month, 'hoge', this_year); 22})(); 23 24

投稿2017/08/31 04:24

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

現在の作りは「指定した数字の範囲のoptionを作り指定したidのコントロールに対してhtmlを追加する」作りにしかなっていないので、そのままは使えません。
「日」のはそのまま使うとして「年/月」で作る関数を自作しなければなりません。
ただ、一部は利用できるので(日付取得部分とかループ部分とか)、流用しつつ「年/月optionを生成する関数」を作ります。
「年」は指定範囲なので今の仕組みは使いますが、「月」に関しては112と範囲は決まっています。
つまり「年の範囲を渡したらその年の範囲ループの中に1
12の固定範囲ループする処理を追加し、年/月を形作る」ですね。

サンプル:

javascript

1 var optionYMCreate, this_day, this_month, this_year, today,this_ym; 2 today = new Date(); 3 this_year = today.getFullYear(); 4 this_month = today.getMonth() + 1; 5 this_ym = this_year +'/'+this_month; //今月 6 7 //年月オプションを作る 8 optionYMCreate = function(ystart,yend, id) { //年の範囲と対象のコントロールIDを受け取る 9 var i, opt,m_i,ym,selected_option ; 10 opt = null; 11 for (i = ystart; i <= yend ; i++) { //年のループ 12 for(m_i=1;m_i<=12;m_i++){ //月のループ 13 ym = i +'/'+ m_i; //ループ内の年月 14 selected_option = ''; 15 if (ym === this_ym) { //今年月と一致してたら選択済みとする 16 selected_option = 'selected'; 17 } 18 opt += '<option value="' + ym + '" '+selected_option+'>' + ym + '</option>'; 19 } 20 } 21 return document.getElementById(id).innerHTML = opt; 22 }; 23 24 optionYMCreate(1950, this_year, 'year_month');

年/月の表示形式や0埋めが必要であれば都度調べて整形してください。

追記:
「今月を選択状態」の「今月」はグローバルに宣言されているので引数で渡していません。

投稿2017/08/31 04:27

編集2017/08/31 04:35
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

amaguri

2017/08/31 05:15

回答ありがとうございます この場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>年月日表示の練習</title> </head> <body> <select name="year" id="id_year"> </select> <select name="month" id="id_month"> </select> のセレクトはどのidを宣言するのでしょうか?
m.ts10806

2017/08/31 05:25

そのHTML構造では年と月のセレクトがそれぞれ独立してますよね。 セレクトを1つにして好きなIDを宣言すると良いです。 私が提示したソースのoptionYMCreate()の第3引数はその宣言したIDです。 もとのamaguriさんが提示されたソースも引数に対象のIDを渡してますよね?根本の作りは変わっていませんよ。
amaguri

2017/08/31 06:41

ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問