連動プルダウンで苦労する

Webで、複数のプルダウン(Select)がいくつか階層構造として並んでいて、一つ目を選ぶと2つ目の中身が変化し、2つ目を選ぶと3つ目が・・・と連動するやつあるじゃないですか。

さっくり組む必要があったのでConnectedSelect.jsというスクリプトを拝借。
そのままだと画面遷移時にselectedでデフォルト指定した項目が自動で展開しない(リンク先で、冒頭のプルダウンの選択状態を復元したかった)ので、上記ページのコメント欄にある ConnectedSelectDefault という関数を追加。

FFやChromeではうまくいったのだが、IEだと選択状態が表示に反映されない問題が発生。
プルダウンの内容は期待通りなのだが、Aを選んでいたはずなのに初期状態(一番上が選ばれた状態)になってしまう。このため、そのままではユーザーに都度選択しなおしてもらう必要がある。

それではこまるので、ConnectedSelectDefault関数を

function ConnectedSelectDefault(selIdList){
	for(var i=0;selIdList[i];i++) {
		var obj = document.getElementById(selIdList[i]);
		if(i){
			//var obj = document.getElementById(selIdList[i]);
			obj.disabled = true;
			// 1階層上のオブジェクト
			var oSel = document.getElementById(selIdList[i-1])
			// 1階層上で記憶されているデフォルトオブジェクト
			var oVal = oSel.ConnectedSelectDefault;
			for(var OG=obj.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) {
				if(OG.label != oVal) { continue; }
				for(var OP=OG.firstChild;OP;OP=OP.nextSibling) {
					obj.appendChild(OP.cloneNode(true));
				}
				obj.disabled = false;
				break;
			}
		}
		// デフォルト設定の適用
		var DVal = obj.ConnectedSelectDefault;
		for(var j=0; j

という感じに変更。
最後に明示的にselectedIndexを指定してるだけ。