selectedIndex

セレクトフォームのオプション配列の値

2009.01.09

構文
document. Formオブジェクト名.オブジェクト名.selectedIndex 　[プロパティ]

説明

セレクトフォームの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>