セレクトボックスの操作JavaScript入門

セレクトボックスを扱うサンプルスクリプト

では、以下のコードをHTMLのボディ内に記入してみてください。 フォーム部分はコピー＆ペーストでも構いませんが、 JavaScript部分は手書きでチャレンジしてもらえたら理解も深まると思います。

<form name="selbox">
<p>好きなプロ野球リーグは？</p>
<select name="league" onchange="teamSet()">
<option value="">*リーグ選択</option>
<option value="">セ・リーグ</option>
<option value="">パ・リーグ</option>
</select>

<p>好きなチームは？</p>
<select name="team">
<option value="">*チーム選択</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</form>


<script>

//セ・リーグのチームの配列
var s_league=new Array(
"","中日","ヤクルト","巨人","阪神","横浜","広島"
);

//パ・リーグのチームの配列
var p_league=new Array(
"","ロッテ","西武","オリックス","ソフトバンク","楽天","日本ハム"
);


function teamSet(){

  //オプションタグを連続して書き換える
  for ( i=1; i<7; i++ ){

    //選択したリーグによって分岐
    switch (document.selbox.league.selectedIndex){
      case 0: document.selbox.team.options[i].text="";break;
      case 1: document.selbox.team.options[i].text=s_league[i];break;
      case 2: document.selbox.team.options[i].text=p_league[i];break;
    }
  }

  //チーム名のセレクトボックスの選択番号を０にする
  document.selbox.team.selectedIndex=0;
}

</script>

サンプル

「チーム選択」のセレクトボックスは最初は項目が何も表示されていません。 しかし「リーグ選択」セレクトボックスでどちらかのリーグを選択すると、 チーム名が表示されるようになります。

サンプルスクリプトの解説

では上記のサンプルスクリプトを見ていきましょう。 フォーム部分では、例によってname属性を付けています。 フォームは「selbox」、最初のセレクトボックスは「league」、 ２番目のセレクトボックスを「team」にしました。

セレクトボックスが変更された時に何かJavaScriptを動かすときは、 onchangeイベントを用います。 上記のソースでは最初のセレクトボックスを変更したときに、 関数teamSet()が実行されます。

続いてJavaScript部分を見ていきます。 まずは各リーグのチーム名を入れる配列「s_league」，「p_league」を作成し、 チーム名を登録しています。 各配列の最初に空文字をセットしていますが、単なる順番合わせです （最初のoptionタグ「*チーム選択」は今回書き換えないので、それに対応したs_league[0]，p_league[0]も参照しません）。

そして、関数teamSet()を記述します。 その中でfor文を使って、 teamセレクトボックスの２つ目以降のoptionタグのテキストを書き換えます。 チームは６つあるので、6回繰り返します。 iの初期値が「0」ではなく「1」なのは、2番目のoptionタグから書き換えるからです。

for文の中でswitch文を使い、leagueセレクトボックスのどれが選択されているかによって処理を分岐します。 分岐条件はセレクトボックスの選択項目番号です。 selectedIndexを使うと取得できます。

document.form名.select名.selectedIndex

選択番号を取得します

「セ・リーグ」を選ぶと1，「パ・リーグ」を選ぶと2、 「*リーグ選択」を選ぶと0となります。あとはcaseを使って分岐し、それぞれの処理を記述します。

optionタグのテキストを書き換えるには、options[].textを使います。 options[]は配列になっているので、セレクトボックスの最初の項目はoptions[0]となります。 for文を1から始めたのも、optoions[0]の「*チーム選択」は書き換えないからです。

document.form名.select名.options[].text

optionタグのテキストを取得します。

「セ・リーグ」を選んだ時は、配列s_leagueの各項目をoptionタグのテキストにセットしていきます。 チーム名配列の最初に空項目を入れたのは、配列s_leagueと配列options[]の番号を合わせるためです。

「パ・リーグ」を選んだ時は、配列p_leagueの各項目をセットします。 「*リーグ選択」を選んだ時は、空文字をセットしてoptionタグのテキストを消しています。 case文の最後はbreakを忘れずに入れます。

最後に、teamセレクトボックスの選択番号を0にして、「*チーム選択」を表示するようにしています。 selectedIndexは選択番号を取得するだけでなく、 代入することによって目的の項目を選択させることもできます。