JavaScriptプログラムに関する各種メモ書き

ドロップダウンリストを動的にJavaScriptで生成する

ドロップダウンリスト( = プルダウンメニュー = オプションメニュー)の内容を動的にJavaScriptで書き換えます

このようなHTMLの場合

<form name="FM">
<select name="myselect" >
<option value="value_aaa">AAA</option>
<option value="value_bbb">BBB</option>
</select>
</form>

このようなスクリプトで変更出来ます。

opt_array = [
	{ text: 'メニュー1', value: 'menu1' } ,
	{ text: 'メニュー2', value: 'menu2' } ,
	{ text: 'メニュー3', value: 'menu3' }
];
_create_dropdownlist( 'FM', 'myselect', opt_array )

function _create_dropdownlist( form_name, select_name, select_array ){
	// length
	document[form_name][select_name].length = select_array.length;
	
	// text, value
	var i;
	for ( i=0; i<select_array.length; i++){
		document[form_name][select_name].options[i].text = select_array[i].text;
		document[form_name][select_name].options[i].value = select_array[i].value;
	}
}

起動方法は

_create_dropdownlist( フォーム名, selectタグのname, 設定したいメニューのハッシュの配列 )

です。

No.630
10/05 16:27

edit