:::: MENU ::::
公開日：2013年11月25日 / 最終更新日：2024年10月16日

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

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

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("牛肉");
			}
	}

//-->
</script>
[HTML section] 
<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("りんご","りんごの値");

Operation of the select box

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

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

</script>
pak85_mbadesagyou20140312_tp_v

Here also together please

Calendar with jQuery

3 Comments

  • Reply Lazar Lavrenty |

    perfect to make a couple of plans for
    long term perspective.

    I read this stuff and if
    necessary, I want to offer you some interesting things or
    tips. Perhaps you are planning to write the following articles to conclude this one.
    I want to read even more information about this!

So, what do you think ?