HTMLに2つのリストボックス(SELECT)があり、 1つ目のリストの選択を変更時に、 2つ目のリストをクリアするJavaScript?が組めません。 下記、ソース例ですが、JavaScriptの書き方や書いてある場所が悪いと 考えていますが、試行錯誤しても解決できない状態です。 ※HTMLやJavaScriptの記述は、ブラウザがHTMLを読み込む時に上から 読み解釈し実行していくとあるJavaScriptの初心者用説明サイトに記述あり。 HTMLソース ------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>車と色の選択</TITLE> <STYLE type="text/css"> <!-- BODY { border-top: 2px #FF0000 solid; text-align: center; color: #000000; } --> </STYLE> <SCRIPT TYPE="text/javascript"> <!-- // 他のJava Script //--> </SCRIPT> // 拾ってきたコードだけど動かない <SCRIPT TYPE="text/javascript"> <!-- function DeleteListColor(x) { if (x.hasChildNodes()) { while (x.childNodes.length > 0) { x.removeChild(x.firstChild) } } } //--> </SCRIPT> </HEAD> <!-- ---------------------------------------------------------- --> <!-- body start------------------------------------------------ --> <BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <DIV> <!-- 拾ってきたコードだけど動かない --> <!-- コメントアウト <script type="text/javascript"> function DeleteListColor() { sl = document.form_list_color.getElementById('list_color'); while (sl.lastChild) { sl.removeChild(sl.lastChild); } } </script> --> <!-- 拾ってきたコードだけど動かない --> <!-- コメントアウト <script type="text/javascript"> function DeleteListColor() { var obj = document.getElementById('list_color'); var f = obj.form; for (var i = 0; i < f.length; i++){ if ((f[i].type == "select-one") && (f[i] != obj)) { f[i].selectedIndex = 0; } } } </script> --> <!-- 以下、ここへ掲載用に単純化してある為、無意味なTABLEやsubmitにみえる --> <!-- 行いたいことは、list_carの選択を変更時、list_colorのリストをクリア。 --> <!-- ※クリア後、 --> <FORM name="form_list_car" method="post" action="this.html"> <TABLE> <CAPTION>1.車の種類のリストボックス</CAPTION> <TR> <TD> <SELECT name="list_car" onChange="DeleteListColor(list_color)"> <OPTION align="left" value="car1">CAR1</OPTION> <OPTION align="left" value="car2">CAR2</OPTION> <OPTION align="left" value="car3">CAR3</OPTION> </SELECT> </TD> </TR> </TABLE> <!-- 本来は、色のクリア以外にも、車種に合わせた色をlist_colorに再設定など、使い方は色々 --> <INPUT type="submit" name="submit_list_car" value="この見本は再帰呼び出しボタン" /> </FORM> <BR> <FORM name="form_list_color" method="post" action="next.html"> <TABLE> <CAPTION>2.車の色のリストボックス</CAPTION> <TR> <TD> <!-- sizeは、なぜか?パソコンでしか有効ではない。Padやスマフォは1行になる --> <SELECT name="list_color" size="3"> <OPTION align="left" value="red"> 赤色</OPTION> <OPTION align="left" value="yellow">黄色</OPTION> <OPTION align="left" value="black"> 黒色</OPTION> </SELECT> </TD> </TR> </TABLE> <INPUT type="submit" name="submit_list_color" value="次画面へ遷移" /> </FORM> </DIV> </BODY> </HTML> ------------------------------------------------------------ 以上です。