:::: MENU ::::

To dynamically change the contents of the select menu (JavaScript)

When you create a business improvement system in-house, in the form of the registration screen
You want in such a manner that selected from the drop-down list the staff names by selecting the store name, it is of note that JavaScript was used at that time.
As we did not find it does not know how good Tara Gugutsu Nantes, it's very good, it is following the will was good.

How do I change the menu item in the drop-down choices by


Myself, I used here. Number of staff (choices) will change for each store.

[JavaScript section]
<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("牛肉");

[HTML section]
<body bgcolor onLoad="functionName()">
<form name="formName" method="post" action="./pathToProgramFile">
<select name = "selectName1" onChange="functionName()">
<option value = "果物">くだもの</option>
<option value = "野菜">やさい</option>
<option value = "肉類">にくるい</option>
<select name = "selectName2">


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

Operation of the select box


In the case of this one, the number of choices available in case of a tie. If loose, number of choices, please use the above.

<form name="selbox">
<select <span class="red">name="league"</span> <strong>onchange</strong>="teamSet()">
<option value="">*リーグ選択</option>
<option value="">セ・リーグ</option>
<option value="">パ・リーグ</option>

<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>


<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;


So, what do you think ?