条件分岐で、選択候補をかえる

htmlのお問い合わせフォームをindexページににて、1の選択肢を選択した時と、2の選択肢を選択した時で、選択候補の選択を変えるようなプログラムを作ったのですが、うまく動きません。
サンプル

html
1<div script type = "text/javascript">
2        <!--選択肢その1-->
3        <select name = "selectName1" onChange="functionName()">
4        <option value = "jr-high">中学</option>
5        <option value = "high">高校</option>
6        </select>
7        
8        <!--選択肢その2（選択肢その1の項目によって変化）-->
9        <select name = "selectName2">
10          
11        </select>
12        <script type = "text/javascript">
13          function functionName()
14          {
15          var select1 = document.forms.formName.selectName1;
16          var select2 = document.forms.formName.selectName2;
17          
18          select2.options.length = 0;
19          
20          if (select1.options[select1.selectedIndex].value == "中学")
21          {
22          select2.options[1] = new Option("1");
23          select2.options[2] = new Option("2");
24          select2.options[3] = new Option("3");
25          select2.options[4] = new Option("4");
26          select2.options[5] = new Option("5");
27          }
28          
29          else if (select1.options[select1.selectedIndex].value == "高校")
30          {
31          select2.options[A] = new Option("A");
32          select2.options[B] = new Option("B");
33          select2.options[C] = new Option("C");
34          select2.options[D] = new Option("D");
35          select2.options[E] = new Option("E");
36          select2.options[F] = new Option("F");
37          select2.options[G] = new Option("G");
38          select2.options[H] = new Option("H");
39          select2.options[I] = new Option("I");
40          select2.options[J] = new Option("J");
41          select2.options[K] = new Option("K");
42          select2.options[L] = new Option("L");
43          }
44          }
45          </script>
46          </div>

ページ全体のコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>title</title>
7</head>
8
9<body>
10<!-- <meta name="Description" content=""> -->
11<div id="formWrap">
12  <h2 class="center">タイトル</h2>
13  <p>説明文</p>
14  <form method="POST" action="check.php">
15    <table class="formTable"　bgcolor onload="functionName()">
16      <form name="formName" method="post" action="./pathToProgramFile"></form>
17      <tbody>
18          <tr>
19              <th>お名前 <span class="must">※必須</span></th>
20              <td><input size="25" type="text" name="name"></td>
21          </tr>
22        <tr>
23      </tr>
24      <div>
25      <form>
26          <select name="selectName1" onChange="functionName()">
27            <option value="jr-high">中学</option>
28            <option value="high">高校</option>
29          </select>
30  
31          <!--選択肢その2（選択肢その1の項目によって変化）-->
32          <select name="selectName2"></select>
33        </form>
34      </div>
35  
36      <script>
37        function functionName() {
38          var select1 = document.forms[0][0];
39          var select2 = document.forms[0][1];
40  
41          select2.options.length = 0;
42  
43          if (select1.options[select1.selectedIndex].value == "jr-high") {
44            select2.options[0] = new Option("1");
45            select2.options[1] = new Option("2");
46            select2.options[2] = new Option("3");
47            select2.options[3] = new Option("4");
48            select2.options[4] = new Option("5");
49          } else if (select1.options[select1.selectedIndex].value == "high") {
50            select2.options[0] = new Option("A");
51            select2.options[1] = new Option("B");
52            select2.options[2] = new Option("C");
53            select2.options[3] = new Option("D");
54            select2.options[4] = new Option("E");
55            select2.options[5] = new Option("F");
56            select2.options[6] = new Option("G");
57            select2.options[7] = new Option("H");
58            select2.options[8] = new Option("I");
59            select2.options[9] = new Option("J");
60            select2.options[10] = new Option("K");
61            select2.options[11] = new Option("L");
62          }
63        }
64      </script>
65
66
67<style type="text/css">
68#formWrap {
69  width:700px;
70  margin:0 auto;
71  color:#555;
72  line-height:120%;
73  font-size:90%;
74}
75table.formTable{
76  width:100%;
77  margin:0 auto;
78  border-collapse:collapse;
79}
80table.formTable td,table.formTable th{
81  border:1px solid #ccc;
82  padding:10px;
83}
84table.formTable th{
85  width:30%;
86  font-weight:normal;
87  background:#efefef;
88  text-align:left;
89}
90@media screen and (max-width:572px) {
91#formWrap {
92  width:95%;
93  margin:0 auto;
94}
95table.formTable th, table.formTable td {
96  width:auto;
97  display:block;
98}
99table.formTable th {
100  margin-top:5px;
101  border-bottom:0;
102}
103input[type="text"], textarea {
104  width:80%;
105  padding:5px;
106  font-size:110%;
107  display:block;
108}
109input[type="submit"], input[type="reset"], input[type="button"] {
110  display:block;
111  width:100%;
112  height:40px;
113}
114}
115.center{
116  text-align: center;
117}
118
119p{
120  text-align: center
121}
122
123.must{
124  color: red;
125}
126
127</style>
128</body>
129</html>

行動規範の内容に同意します

回答1件

ベストアンサー

以下で動きました。

  <body>
    <div>
      <!--選択肢その1-->
      <form>
        <select name="selectName1" onChange="functionName()">
          <option value="jr-high">中学</option>
          <option value="high">高校</option>
        </select>

        <!--選択肢その2（選択肢その1の項目によって変化）-->
        <select name="selectName2"></select>
      </form>
    </div>

    <script>
      function functionName() {
        var select1 = document.forms[0][0];
        var select2 = document.forms[0][1];

        select2.options.length = 0;

        if (select1.options[select1.selectedIndex].value == "jr-high") {
          select2.options[0] = new Option("1");
          select2.options[1] = new Option("2");
          select2.options[2] = new Option("3");
          select2.options[3] = new Option("4");
          select2.options[4] = new Option("5");
        } else if (select1.options[select1.selectedIndex].value == "high") {
          select2.options[0] = new Option("A");
          select2.options[1] = new Option("B");
          select2.options[2] = new Option("C");
          select2.options[3] = new Option("D");
          select2.options[4] = new Option("E");
          select2.options[5] = new Option("F");
          select2.options[6] = new Option("G");
          select2.options[7] = new Option("H");
          select2.options[8] = new Option("I");
          select2.options[9] = new Option("J");
          select2.options[10] = new Option("K");
          select2.options[11] = new Option("L");
        }
      }
    </script>
  </body>

サンドボックス

forms から要素を取得する為にはform要素で囲む必要があります
select1.options[select1.selectedIndex].valueにはテキストではなくvalue属性（例えばhigh）が入ってるのでその辺りの条件を変える必要があります
select2.optionsのインデックスは数値である必要があります

投稿2019/10/19 18:37

nju33

総合スコア48

退会済みユーザー

2019/10/20 09:12

nju33さんの提示した、サンプルサイトをみたところ正常に動いているのですが、自分のページに当てはめたところ、うまく行きませんでした。ページ全体のコードを改めて提示しましたので、よろしければご確認ください。

nju33

2019/10/20 09:39

`form`要素が2つになったからみたいですね。（`<form method="POST" action="check.php">`が追加された） `select`は2番目の`form`要素に入れてるということになったので、 ``` var select1 = document.forms[0][0]; var select2 = document.forms[0][1]; ``` を ``` var select1 = document.forms[1][0]; var select2 = document.forms[1][1]; ``` とすれば動くと思います。

退会済みユーザー

2019/10/20 09:42

ありがとうございます。無事に解決することができました。原因は上記の通り、form要素が二つあるからでした。ありがとうございます。

行動規範の内容に同意します