セレクトボックスの動的な変更

親セレクトボックスが変更されると、子セレクトボックスの値が親の値に紐付く値に変更される。
WEBアプリでわりと必要になる。


var childOptions = new Object();
childOptions[""] = new Array(new Option("select parent.",""));
childOptions["foo"] = new Array(new Option("AAAAA","01"), new Option("BBBBB","02"), new Option("CCCCC","03"));
childOptions["bar"] = new Array(new Option("aaaaa","01"), new Option("bbbbb","02"), new Option("ccccc","03"));
childOptions["hoge"] = new Array(new Option("11111","01"), new Option("22222","02"));

function change() {
var form = document.forms[0];
var parent = form.parent;
var child = form.child;

child.options.length = 0;

var options = childOptions[parent.value];

for(var i=0; i<options.length; i++) {
child.options[] = options[i];
}
}

実際の動作はこんな感じ