:::: MENU ::::

セレクトメニューの内容を動的に変えるには(JavaScript)

社内の業務改善システムを作るときに、登録画面のフォームで
店舗名を選択してスタッフ名をドロップダウンリストから選ばせるようにしたく、その時に使ったJavaScriptのメモです。
なんてググったらいいかわからず、なかなかいいのが見つからなかった中で、よかったのが下記のです。

選択肢によってドロップダウンのメニュー項目を変えるには

http://www.ksknet.net/javascript/post_54.html

自分は、こちらを使いました。店舗ごとにスタッフ(選択肢)の数が変わるので。

[JavaScript部分]
<script type = "text/javascript">
<!--
function functionName()
	{
		var select1 = document.forms.formName.selectName1; //変数select1を宣言
		var select2 = document.forms.formName.selectName2; //変数select2を宣言
		
		select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要
		
		if (select1.options[select1.selectedIndex].value == "果物")
			{
				select2.options[0] = new Option("りんご");
				select2.options[1] = new Option("みかん");
				select2.options[2] = new Option("オレンジ");
			}
		
		else if (select1.options[select1.selectedIndex].value == "野菜")
			{
				select2.options[0] = new Option("キャベツ");
				select2.options[1] = new Option("きゅうり");
				select2.options[2] = new Option("にんんじん");
				select2.options[3] = new Option("たまねぎ");
			}
		
		else if (select1.options[select1.selectedIndex].value == "肉類")
			{
				select2.options[0] = new Option("豚肉");
				select2.options[1] = new Option("牛肉");
			}
	}

//-->
</script>
[HTML部分]
<body bgcolor onLoad="functionName()">
<form name="formName" method="post" action="./pathToProgramFile">
<p><!--選択肢その1-->
<select name = "selectName1" onChange="functionName()">
<option value = "果物">くだもの</option>
<option value = "野菜">やさい</option>
<option value = "肉類">にくるい</option>
</select></p>
<p><!--選択肢その2(選択肢その1の項目によって変化)-->
<select name = "selectName2">
</select></p>
<p></body></p>

なお上記の例ではプログラムに渡される値は表示されている値となります。表示の値とプログラムに渡る値を別にするには以下のようにすればよい。

new Option("りんご","りんごの値");

セレクトボックスの操作

http://www.pori2.net/js/form/5.html

こちらの場合は、選択肢の数が同数の場合に使えます。選択肢の数がバラバラの場合は、上記を使ってください。

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

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


<script>

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

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


function teamSet(){

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

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

  <span class="comment">//チーム名のセレクトボックスの選択番号を0にする</span>
  document.selbox.team.<strong class="std">selectedIndex</strong>=0;
}

</script>
pak85_mbadesagyou20140312_tp_v



So, what do you think ?