javascript超初心者です
学校の課題で三段階ドロップダウンを作りたいのですが途中頭がこんがらがってしまい
三個目を表示する方法いただきたくご教示頂きたく。。。。

以下コードです

1段階目(メイン)のプルダウンメニュー
＜select class="mainselect">
＜option value="">メイン＜/option>
＜option value="a">A＜/option>
＜option value="b">B＜/option>
＜/select>
2段階目(サブ)のプルダウンメニュー
＜select id="A" class="subbox">
＜option value="">サブ＜/option>
＜option value="aa">A-A＜/option>
＜option value="ab">A-B＜/option>
＜option value="ac">A-C＜/option>
＜/select>
＜select id="B" class="subbox">
＜option value="">サブ＜/option>
＜option value="ba">B-A＜/option>
＜/select>
3段階目(サブサブ)のプルダウンメニュー
＜select id="aa" class="subsubbox">
＜option value="">サブサブ＜/option>
＜option value="aa1">A-A１＜/option>
＜/select>

＜script type="text/javascript">

・ サブBOXを全て非表示にする
var allSubBoxes = document.getElementsByClassName("subbox");
for( var i=0 ; i
allSubBoxes[i].style.display = 'none';
}

・ 全てのプルダウンボックスごとに処理
var mainBoxes = document.getElementsByClassName('pulldownset');
for( var i=0 ; i
var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
・ メインのプルダウンメニュー
var subSelect = mainBoxes[i].getElementsByClassName("subbox");
・サブのプルダウンメニュー
mainSelect[0].onchange = function () {
・ 同じ親要素に含まれている全サブBOXを消す
var subBox = this.parentNode.getElementsByClassName("subbox");
・ 同じ親要素に含まれる.subbox
for( var j=0 ; j
subBox[j].style.display = 'none';
}
・ 指定されたサブBOXだけを表示する
if( this.value ) {
var targetSub = document.getElementById( this.value );
・「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
targetSub.style.display = 'inline'
}
}
});
・この後サブで選択したサブサブのみstyleのdisplayのをinlineにしたいのですがどうしたらいいでしょうか。。。
＜/script>