..

JavaScriptの入門とサンプル集
JavaScript入門−フォーム編(セレクトメニュー)     ■戻る     ■次へ    ■Home

セレクトメニュー 

 セレクトメニューをJavaScriptで制御する説明します。


セレクトメニューをJavaScriptで制御する方法

 ◇HTML

  <select name="セレクトメニュー名">
  <option>項目名</option>
  </select>

 ◇JavaScriptで制御する方法

  document.フォームオブジェクト.エレメント(部品)オブジェクト.selectedIndex

   選択されている項目の参照番号(0からの通し番号)を示す。
   値を代入すると選択項目を変更できる

  document.フォームオブジェクト.エレメントオブジェクト.options

   オプション(項目)オブジェクトの配列を示す

  document.フォームオブジェクト.エレメントオブジェクト.options[参照番号]
   (参照番号はセレクトメニュー先頭からの項目数で0からの通し番号)


   個々のオプションオブジェクトを示す
   
  document.フォームオブジェクト.エレメントオブジェクト.オプションオブジェクト.text


   項目の文字列を返す

 フォームオブジェクトの部分は<form>タグの「name」属性で指定したフォーム名の他、下記のような方法で指定することができます。
   document.forms[参照番号](ページ先頭からのフォーム数で0からの通し番号)

   document.forms["フォーム名"]

 エレメントオブジェクトの部分は「name」属性で指定したセレクトメニュー部品名の他、下記のような方法で指定することができます。
   document.フォームオブジェクト.elements[参照番号]

   (参照番号はフォームの先頭からのエレメント(部品)数で0からの通し番号)



 それでは、セレクトメニューを使ったサンプルプログラムを見てみましょう。生年月日をセレクトメニューから選択して、現在の歳を計算して表示するプログラムです。(うるう年や30日の月の判定はしていません・・・すんません・・・)


<html>
<head>
<title>年齢を計算する</title>
<script language="JavaScript"><!--
function calc()
{
   dt=new Date();
   dy=dt.getYear();
   dm=dt.getMonth();
   dd=dt.getDate();
   if(dy<2000)dy+=1900;

   my=parseInt(document.myForm.year.value);
   mm=document.myForm.month.selectedIndex;
   d1=document.myForm.day1.selectedIndex;
   d2=document.myForm.day2.selectedIndex;
   md=d1*10+d2;
   if((dy<my)||((dy==my)&&(dm<mm))||((dy==my)&&(dm==mm)&&(dd<md))){
      alert("まだ生まれてません!");
      return;
      }
   if((md==0)||(md>31)){
      alert("日付が間違っています!");
      returen;
      }
   old=dy-my;
   if(dm<mm)old--;
   else{
      if((dm=mm)&&(dd<md))old--;
   }
   alert("あなたは現在"+old+"歳です");
}
// --></script>

</head>
<body>
<form name="myForm">
生年月日を入力してください
<br><br>
西暦
<input type="text" name="year">

<br><br>
<select name="month">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>


<select name="day1">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>


<select name="day2">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>


</form>
<br><br>
<input type="button" value="計算" onClick="calc()">
</body>
</html>

〜sample23.html〜のリスト




関数「calc」の定義

「Date」オブジェクトを生成
現在の年を取得
現在の月を取得(0〜11)
現在の日を取得(1〜31)
2000年未満の年は1900年からの差分を返すブラウザへの
対応。ネスケ4.06以降は差分を返す。IE4以降は西暦4桁。
テキストフォームから生まれた年を取得、文字列→整数値
セレクトメニューから生まれた月の取得(0〜11)
セレクトメニューから生まれた日の十の位を取得(0〜9)
セレクトメニューから生まれた日の一の位を取得(0〜9)
日付の計算

生年月日が未来の場合アラート表示をして関数を抜ける



生年月日の日付が0または31を超えていたらアラート表示
して関数を抜ける


現在の年から生まれた年を引く
現在が生まれた月を越えていなければ1歳引く

現在が生まれた月と同じならば、生まれた日を過ぎていなけ
れば1歳引く
現在の年齢をアラート表示




「myForm」というフォームの作成



生まれた年を入力するテキストフィールド


生まれた月を選ぶセレクトメニュー(1〜12)














生まれた日の十の位を選ぶセレクトメニュー(0〜3)






生まれた日の一の位を選ぶセレクトメニュー(0〜9)














ボタンを押すと関数「calc」を実行します

   ■sample23.htmlを実行する


sample23.htmlの実行画面


..

JavaScript入門−フォーム編(セレクトメニュー・フォーム共通)     ■戻る     ■次へ     ■Home


..