お世話になっております。
上記の質問を元に、日付のプルダウンを作成しています。
今回、デフォルトで現在の年月日を選択するようにしました。
そして、以下の手順(①②の順番)でテストしたところ、以下のようになりました。
①1度、年・月・日を全て初期値から他の値に変更し、
②再度、年を初期値に変更すると、
③月と日も初期値に戻ってしまう。
これだと使い勝手が悪いので、②の「年を変更する」と
③で「月・日ともに1が選択される」、または「日のみ1を選択する」ようにしたいのです。
onLoadで読み込むsetSelectYearメソッドから数珠繋ぎに呼ばれるsetSelectMonthメソッド、setSelectDateメソッドを
もう1つずつ別名で作り、
option.selected = ( m==NowMonth );
option.selected = ( d==NowDate );
の所をそれぞれ
option.selected = ( m==1 );
option.selected = ( d==1 );
に変えたものをそれぞれonChangeで呼ぶことも考えたのですが、そこしか変わらないメソッドを増やすのも
ソースの無駄な気がしまして...。
お知恵を貸していただけると幸いです。
よろしくお願いいたします。
html
<td><select name="year" id="selectYear" onchange="setSelectMonth()"> </select>年 <select name="month" id="selectMonth" onchange="setSelectDate()"> </select>月 <select name="date" id="selectDate"> </select>日 </td>
JavaScript
1window.onload=function(){ 2 setSelectYear(); 3} 4 5var Now = new Date(); 6 7//現在年 8var NowYear = Now.getFullYear(); 9 10//現在月 11var NowMonth = Now.getMonth()+1; 12 13//現在日 14var NowDate = Now.getDate(); 15 16/* 17 * 年プルダウン 18 */ 19function setSelectYear(){ 20 21 var selectElement = document.getElementById("selectYear"); 22 var y = 0; 23 24 //現在~10年前分 25 for(y = NowYear; y >= NowYear-10; y--){ 26 27 var option = document.createElement("option"); 28 29 option.value = y; 30 31 option.text = y; 32 33 selectElement.appendChild(option); 34 35 //現在の年選択 36 option.selected = ( y==NowYear ); 37 } 38 setSelectMonth(); 39} 40 41/* 42 * 月プルダウン 43 */ 44function setSelectMonth(){ 45 46 var m = 0; 47 48 var selectElement = document.getElementById("selectMonth"); 49 var child; 50 51 while(child = selectElement.firstChild){ 52 selectElement.removeChild(child); 53 } 54 55 //12ヶ月分 56 for(m = 1; m <= 12; m++){ 57 58 var option = document.createElement("option"); 59 option.value = m; 60 option.text = m; 61 selectElement.appendChild(option); 62 63 //現在の月選択 64 option.selected = (m == NowMonth); 65 66 } 67 setSelectDate(); 68} 69 70/* 71 * 日のoptionを更新 72 */ 73function setSelectDate(){ 74 75 var d = 0; 76 77 //選択された年を取得 78 var y = document.form1.selectYear.options[document.form1.selectYear.selectedIndex].value; 79 80 //選択された月を取得 81 var m = document.form1.selectMonth.options[document.form1.selectMonth.selectedIndex].value; 82 83 84 // 閏年判定 85 if (m == 2 && (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0))) { 86 87 //閏年の2月 88 var last = 29; 89 90 //それ以外 91 }else{ 92 var lastday = new Array(11); 93 lastday = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 94 last = lastday[m-1]; 95 } 96 97 var selectElement = document.getElementById("selectDate"); 98 var child; 99 100 while(child = selectElement.firstChild){ 101 selectElement.removeChild(child); 102 } 103 104 //1日から月の最終日まで 105 for(d = 1; d <= last; d++){ 106 107 var option = document.createElement("option"); 108 option.value = d; 109 option.text = d; 110 selectElement.appendChild(option); 111 112 //現在の日選択 113 option.selected = (d == NowDate); 114 } 115 116}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/18 06:42