0

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>

以上です。

5
  • どこが悪いか答えるのはかんたんにできるのですが、まずはどうやってデバッグするかを覚えるのが今後のためだと思います。ブラウザに付属の「開発者ツール」「DevTools」などと呼ばれるツールを起動して、DeleteListColor() の先頭からステップ実行してみてください。
    – int32_t
    Commented 2017年5月11日 5:00
  • ご回答ありがとうございます。簡単ということで安心しました。簡単でしたら自力でさらに1,2週間奮闘すればできますね。きっと初歩的なところを掲載してまったのだと反省しております。ここは高技術者の方用ということですね。ご回答、お手数をおかけいたしました。もっとたくさんの組み合わせをして動くのをさがします。 Commented 2017年5月11日 5:05
  • 本件、解決方法:「初心者は、質問せずに、自力で解決しなさい!!」で、クローズしています。 Commented 2017年5月11日 5:23
  • 2
    初歩的な質問をするな、という意図ではありません。この質問と回答が他の人の役に立つかもしれませんので。
    – int32_t
    Commented 2017年5月11日 5:31
  • 3
    「拾ってきたコード」という表現は、コードを記述した人に対して失礼です。そのような言動は慎むべきではないでしょうか?
    – sayuri
    Commented 2017年5月11日 10:34

1 件の回答 1

1

●2個めと3個めのDeleteListColor()の問題

document.getElementById('list_color') としていますが、ドキュメント中に list_color という ID が付いている要素がありません。

2つ目の <select>id='list_color' を付けるか、document.querySelector('select[name=list_color]') などを使います。

●3個めのDeleteListColor()の問題

上記の問題を解決しても、このコードはあなたが求める動作ではありません。動作を理解せずにコピペで済ませようとするのは危険なのでやめましょう。

●呼び出し側の問題

 <SELECT name="list_car" onChange="DeleteListColor(list_color)">

list_color という変数が存在しないため、例外が出ているかと思います。最初の問題と同じように、IDを付けてgetElementById() を使うなどする必要があります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。