#author("2018-07-06T11:37:20+09:00","","")
*select選択ボックスを動的に作る [#eefddbab]

JavaScriptで、こんな感じの、選択肢が動的に変わる選択ボックス作るサンプルです。

#htmlinsert(:HTML/動的選択ボックス)

-最初に選んだ選択ボックスによって、次の選択ボックスの選択肢が変わります。

''解説''

-フォームの<select>+<option>タグで作った選択ボックスは、~
Selectオブジェクトという種類のオブジェクトになります。~
Selectオブジェクトは、optionsという選択肢の配列を持っています。~
これにアクセスすることで、動的に選択肢の内容を変えることができます。~

-selectオブジェクト(選択ボックス)を取得するには、~
タグで<select name="選択ボックス名" 〜で名前をちゃんとつけて、~
<form name="フォーム名" で名前をちゃんとつけて、~
 フォーム名.elements["選択ボックス名"]
または
 フォーム名.選択ボックス名
で取得できます。




-選択肢が選択されたときのイベントは、onChangeです。
-optionsの要素は、.valueと.textというプロパティを持ちます。~
.valueは、<option>タグのvalue=のことで、~
.textは、選択肢として表示されるテキストのことです。


''コード''~
#code(JavaScript){{
<html>
<title>JavaScript:動的選択ボックス作成サンプル</title>
<head>
</head>
<body>
動的選択ボックス作成サンプル : 商品編 <br>

<form name="form1" method="get" 
action="http://f29.aaa.livedoor.jp/~morg/wiki/sample/disp_send.php" onsubmit="gettext(this)">
<!-- set name and onChange -->
<select name="sel_bunruiA" onChange="selectBunruiA(this)">
<option value="">(種類)</option>
</select>
<select name="sel_bunruiB" width="100px"><option value="">(品名)</option></select>
<input type="submit" value="検索"></input> 
<input type="hidden" name="search" value=""></input>
</form>

<script type="text/javascript" language="JavaScript">
<!--
	// 最初の分類リスト (分類Aリスト)を定義
	var bunruiA = new Array("野菜","果物","肉","魚");

	// 次の分類(分類Aごとの分類Bリスト)を定義
	var bunruiB = new Array();
	bunruiB["野菜"]= new Array("じゃがいも","にんじん","ピーマン");
	bunruiB["果物"]= new Array("スイカ(1/4)","オレンジ","いちご");
	bunruiB["肉"]  = new Array("豚肉(100g)","牛肉(100g)","羊肉(100g)");
	bunruiB["魚"]  = new Array("サンマ(1尾)","アジ(1尾)","しらす(小パック)");

	// 分類Aの選択リストを作成
	createSelection( form1.elements['sel_bunruiA'], "(種類)", bunruiA, bunruiA);

	////////////////////////////////////////////////////
	//
	// 選択ボックスに選択肢を追加する関数
	//	引数: ( selectオブジェクト, value値, text値)
	function addSelOption( selObj, myValue, myText )
	{
		selObj.length++;
		selObj.options[ selObj.length - 1].value = myValue ;
		selObj.options[ selObj.length - 1].text  = myText;

	}
	/////////////////////////////////////////////////////
	//
	//	選択リストを作る関数 
	//	引数: ( selectオブジェクト, 見出し, value値配列 , text値配列 )
	//
	function createSelection( selObj, midashi, aryValue, aryText )
	{
		selObj.length = 0;
		addSelOption( selObj, midashi, midashi);
		// 初期化
		for( var i=0; i < aryValue.length; i++)
		{
			addSelOption ( selObj , aryValue[i], aryText[i]);
		}
	}
	///////////////////////////////////////////////////
	//
	// 	分類Aが選択されたときに呼び出される関数
	//
	function selectBunruiA(obj)
	{
		// 選択肢を動的に生成
		createSelection(form1.elements['sel_bunruiB'], "(品名)", 
				bunruiB[obj.value], bunruiB[obj.value]);

	}
	/////////////////////////////////////////////////
	// submit前の処理
	function gettext(form){ 
		var a = form1.sel_bunruiA.value;   // 分類1
		var b = form1.sel_bunruiB.value;   // 分類2
		// ANDでつなげる
		form1.elements['search'].value = a+' AND '+b;
		alert(form1.elements['search'].value );
	} 

//-->
</script>
}}
**質問・コメント [#a8079424]
- sd -- [[szdx]] &new{2012-10-15 (月) 15:25:47};
- あ -- [[あ]] &new{2012-11-30 (金) 13:55:35};
- d -- [[dd]] &new{2012-11-30 (金) 13:55:53};
- d -- [[dd]] &new{2012-11-30 (金) 13:56:03};
- 動作は期待とおりなのですが PHPでのコーデェングに悩んでいます。 -- [[時遊人]] &new{2013-06-05 (水) 11:41:48};
- ああああ -- [[あああ]] &new{2014-06-09 (月) 11:27:38};
- 助かりました!ありがとうございます -- [[りっぴ]] &new{2014-10-11 (土) 14:45:19};
- コーデェング -- [[CFJ]] &new{2015-01-16 (金) 15:40:13};
- ああああ --  &new{2015-07-29 (水) 11:16:09};
- s -- [[s]] &new{2018-07-06 (Fri) 11:37:20};

#comment