Subject   : selectのオブジェクト使用例

カテゴリー  : Home page > JavaScript


 selectオブジェクトの使用例

セレクトメニューで選択された表を表示するスクリプト

表1
表2
表3

選択された番号に応じて表示する表を変えるには表にid属性で名前を指定、スタイルシートでvisibilityを指定しておきます。NN4の場合はposition:absolute;の指定も必要です。選択された番号に応じて表のスタイルプロパティであるvisibilityに"visible"を入れれば選択された番号の表が表示されます。

for (i=1; i<=3; i++)
{
  if (document.all) document.all["tbl"+i].style.visibility = "hidden";
  if (document.layers) document.layers["tbl"+i].visibility = "hidden";
}
n = selOBJ.selectedIndex + 1;
if (document.all) document.all["tbl"+n].style.visibility = "visible";
if (document.layers) document.layers["tbl"+n].visibility = "visible";


選択された項目番号の値(optionタグのvalueで指定した値、データ)を 取得するにはselectタグのonChangeイベントと組み合わせます。
IEとNNでは取得方法が異なるため「this[this.selectedIndex].value」 のように選択された番号を明示的に指定する必要があります。

<select onChange="alert(this[this.selectedIndex].value)">
<option value="windows2000">windows2000
<option value="windowsXP">windowsXP
<option value="windowsVISTA">windowsVISTA
</select>



[メニューへ戻る]  [HOMEへ戻る]  [前のページに戻る]