PR
構文
 
  document. Formオブジェクト名.オブジェクト名.selectedIndex  [プロパティ]
総合 インデックス
メソッド
FirefoxIE

説明

  • セレクトフォームのoptions配列の値を持つプロパティ。
  • JavaScriptでは、HTMLファイル上で「select」要素内に設定する「option」要素の[0]から始まるoptions配列を自動的に作成する。「selectedIndex」プロパティは、このオプション配列のインデックスの値を持つ。

用例

セレクトフォーム「SForm」のオプション項目を変更すると,変更したオプション項目に設定したHTMLファイルをフレーム「f1」に読み込む。HTMLファイル「index.html」に設定したセレクトフォームのうち「 <option> topへ」のoptions配列は「options[0]」となりselectedIndexプロパティの値は「0」,「 <option>1ページ目」のoptions配列は「options[1]」となり,selectedIndexプロパティの値は「1」。「 <option>2ページ目」のoptions配列は「options[2]」となり,selectedIndexプロパティの値は「2」。「 <option>1ページ目」のoptions配列は「options[3]」となり,selectedIndexプロパティの値は「3」となる。関数「FC()」の処理ではこれらのselectedIndexプロパティの値を判断することで選択された項目に合わせたHTMLファイルを読み込んでいる。
  

【index.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" >
<html><head>
<title>selectedIndex</title>
</head>
<frameset rows="*,80">
<frame src="f1.html" name="f1">
<frame src="f2.html" name="f2">
</frameset>
<noframes>
フレーム機能を使用しています。フレーム対応のブラウザで 試してください(^_^)。
</noframes>
</html>
・f1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>f1</title>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*セレクトフォームのオプション配列の値
</body></html>

・f2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>f2</title>
<script type="text/javascript">
<!--
function FC() {
if (document.FORM.SForm.selectedIndex == 0) { parent.f1.location.href = "f1.html" }
if (document.FORM.SForm.selectedIndex == 1) { parent.f1.location.href = "page1.html" }
if (document.FORM.SForm.selectedIndex == 2) { parent.f1.location.href = "page2.html" }
if (document.FORM.SForm.selectedIndex == 3) { parent.f1.location.href = "page3.html" }
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
<form name="FORM">
<select name="SForm" onChange="FC()">
<option> topへ
<option>1ページ目
<option>2ページ目
<option>3ページ目
</select>
</form>
</body></html>

・page1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>page1</title>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
<h1>・1ページ目...</h1>
</body></html>

・page1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>page2</title>
<style type="text/css">
<!--
body { background-color: #e0ffff; }
-->
</style>
</head>
<body>
<h1>・2ページ目...</h1>
</body></html>

・page1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>page3</title>
<style type="text/css">
<!--
body { background-color: #ffefd5; }
-->
</style>
</head>
<body>
<h1>・3ページ目...</h1>
</body></html>

この用例を実行する

関連項目

-->frameオブジェクト/parentプロパティ 
-->locationオブジェクト/hrefプロパティ