JavaScriptについて質問させていただきます。

あるセレクトボックスに対応したセレクトボックスを表示させるJavascriptを作成したいと思っています。
（例えば、あるセレクトボックスにて"東京"を選んだ場合、その横に"２３区内"または"２３区外"を選べるようなセレクトボックスが作成されたり、最初のセレクトボックスにて"大阪"を選んだ場合、その横に"池田市"や"和泉市"などが選べるセレクトボックスが作成されるといったようなものです。）

とりあえず以下のように組んでみました。

<table>
<tr>
<td><FORM METHOD="POST" NAME="f">
<SELECT NAME="sel" ONCHANGE="ChangeSelection(this.form, this)">
<OPTION VALUE="東京" SELECTED>東京
<OPTION VALUE="大阪">大阪
<OPTION VALUE="愛知">愛知
</SELECT>
</td>
<SCRIPT LANGUAGE="JavaScript">
function ChangeSelection(form, selection) {
	v = selection.selectedIndex;
	If (v == 0){
	document.write("<td><FORM METHOD='POST' NAME='f1'>
         <SELECT NAME='sel1'>
         <OPTION VALUE='23区内' SELECTED>２３区内
         <OPTION VALUE='23区外'>２３区外</SELECT></form></td>")
	}
}
</SCRIPT>

しかし、これでは最初のセレクトボックスが表示されるだけになってしまいます。
これはどこが悪いでしょうか？

申し訳ございませんが、アドバイスいただけますよう、宜しくお願い致します。

document.writeは既に読み込んだあとからでは使えません。
この場合、DHTMLを使って、行うしかないでしょう。
<table>
<tr>
<td><FORM METHOD="POST" NAME="f">
<SELECT NAME="sel" ONCHANGE="ChangeSelection(this.form, this)">
<OPTION VALUE="東京" SELECTED>東京
<OPTION VALUE="大阪">大阪
<OPTION VALUE="愛知">愛知
</SELECT>
</td>
<SCRIPT LANGUAGE="JavaScript">
function ChangeSelection(form, selection) {
	v = selection.selectedIndex;
	If (v == 0){
　　　　 /*ここから、変更してみます。
　　　　 変更前：
	document.write("<td><FORM METHOD='POST' NAME='f1'>
         <SELECT NAME='sel1'>
         <OPTION VALUE='23区内' SELECTED>２３区内
         <OPTION VALUE='23区外'>２３区外</SELECT></form></td>")
         */
         //変更後
　　　　 selecto.innerHTML="<td><FORM METHOD='POST' NAME='f1'><SELECT NAME='sel1'><OPTION VALUE='23区内' SELECTED>２３区内<OPTION VALUE='23区外'>２３区外</SELECT></form></td>";
	}
}
</SCRIPT>

selectを追加したいところに<font id=selecto></font>と入力しておいてください。