トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > フォーム編 > プルダウンメニュー(セレクトメニュー)

以前自分で書いたプログラムをそのまま転載。
別にスマートってことはないが、プルダウンのオプションとして1~60まですべて書き出すよりはすっきりしていると思う。
意外にJRの乗り換え案内とかは分を再現するのにすべて<option>を60個書いてたりするので、
私のやり方の方がへそまがりなのかもしれないが。。。

/*form部分*/
日時：<select id="year" name="year"></select>年<select id="month" name="month"></select>月<select id="date" name="date"></select>日<br>
時間：<select id="hour" name="hour"></select>時<select id="minute" name="minute"></select>分<br>

/*javascript部分*/
function setDateAndTime(){
   var yearObj = document.getElementById("year");
   var currentdate = new Date();
   var currentyear = currentdate.getFullYear();
   var monthObj = document.getElementById("month");
   var dateObj = document.getElementById("date");
   for(var i = 0; i <= 1; i++) {
   	yearObj.options[i] = new Option(currentyear+i,(currentyear+i)+"年");
   }
   for(var i = 0; i < 12; i++) {
   	monthObj.options[i] = new Option(i+1,i+"月");
   }
   for(var i = 0; i < 31; i++) {
   	dateObj.options[i] = new Option(i+1,i+"日");
   }
   
   var hourObj = document.getElementById("hour");
   var minuteObj = document.getElementById("minute");
   for(var i = 0; i < 24; i++) {
   	hourObj.options[i] = new Option(i,i+"時");
   }
   for(var i = 0; i < 60; i++) {
   	minuteObj.options[i] = new Option(i,i+"分");
   }

}

セレクトメニューで選択項目を取得するには、

<form method = "POST" ...>などとしておき、PHPとかで$格納する変数 =$_POST['name'];

みたいな形で処理するのも一つの手だし、

document.getElementById("selectメニューのID").onchange = function() {
 自分のオブジェクトのvalue、つまりthis.valueに値が格納されているので、
 javascript側で何らかの記述を行う
}

というのも一つの手段。