連動プルダウンで苦労する
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を指定してるだけ。