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