HTMLに２つのリストボックス(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>１．車の種類のリストボックス</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>２．車の色のリストボックス</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>
    
```

* * *

以上です。
CC BY-SA 3.0
2017-05-11T02:04:36.110
34617
2018-03-24T09:12:04.887
2017-05-11T02:09:33.840
23072
23072
question
javascript html
HTML内のJavaScriptでリストボックスをクリアする方法？
**●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()`
を使うなどする必要があります。
CC BY-SA 3.0
2017-05-11T07:31:22.260
34632
2017-05-11T07:31:22.260
3475
34617
answer