選択肢候補切り替えの実装

前回の質問より、選択肢の動的候補の切り替えを行う事ができたのですが、お問い合わせフォームに当てはめた所、動作しなくなってしまいました。

formなどを変えては見たのですが、動作せず。。。
以下のページでも動作する様にするにはどうすれば良いのでしょうか？

php
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        <tr>
26        <th>学校 <span class="must">※必須</span></th>
27          <td>
28          <select name="selectName1" onChange="functionName()">
29            <option value="jr-high">中学</option>
30            <option value="high">高校</option>
31          </select>
32          </td>
33        </tr>
34        <tr>
35          <th>クラス <span class="must">※必須</span></th>
36          <!--選択肢その2（選択肢その1の項目によって変化）-->
37          <td>
38          <select name="selectName2"></select>
39          </td>
40        </form>
41        </tr>
42      </div>
43      <script>
44          function functionName() {
45            var select1 = document.forms[1][0];
46            var select2 = document.forms[1][1];
47    
48            select2.options.length = 0;
49    
50            if (select1.options[select1.selectedIndex].value == "jr-high") {
51              select2.options[0] = new Option("1");
52              select2.options[1] = new Option("2");
53              select2.options[2] = new Option("3");
54              select2.options[3] = new Option("4");
55              select2.options[4] = new Option("5");
56            } else if (select1.options[select1.selectedIndex].value == "high") {
57              select2.options[0] = new Option("A");
58              select2.options[1] = new Option("B");
59              select2.options[2] = new Option("C");
60              select2.options[3] = new Option("D");
61              select2.options[4] = new Option("E");
62              select2.options[5] = new Option("F");
63              select2.options[6] = new Option("G");
64              select2.options[7] = new Option("H");
65              select2.options[8] = new Option("I");
66              select2.options[9] = new Option("J");
67              select2.options[10] = new Option("K");
68              select2.options[11] = new Option("L");
69            }
70          }
71        </script>
72    <tr>
73        <th>お問い合わせ内容 <span class="must">※必須</span><br></th>
74        <td><textarea name="iken" cols="50" rows="5"></textarea></td>
75      </tr>
76    </tbody></table>
77    <p>
78      <input type="submit" value="送信">　
79      <input type="reset" value="リセット">
80    </p>
81  </form>
82</div>
83
84
85
86  
87
88<style type="text/css">
89#formWrap {
90  width:700px;
91  margin:0 auto;
92  color:#555;
93  line-height:120%;
94  font-size:90%;
95}
96table.formTable{
97  width:100%;
98  margin:0 auto;
99  border-collapse:collapse;
100}
101table.formTable td,table.formTable th{
102  border:1px solid #ccc;
103  padding:10px;
104}
105table.formTable th{
106  width:30%;
107  font-weight:normal;
108  background:#efefef;
109  text-align:left;
110}
111@media screen and (max-width:572px) {
112#formWrap {
113  width:95%;
114  margin:0 auto;
115}
116table.formTable th, table.formTable td {
117  width:auto;
118  display:block;
119}
120table.formTable th {
121  margin-top:5px;
122  border-bottom:0;
123}
124input[type="text"], textarea {
125  width:80%;
126  padding:5px;
127  font-size:110%;
128  display:block;
129}
130input[type="submit"], input[type="reset"], input[type="button"] {
131  display:block;
132  width:100%;
133  height:40px;
134}
135}
136.center{
137  text-align: center;
138}
139
140p{
141  text-align: center
142}
143
144.must{
145  color: red;
146}
147
148</style>
149</body>
150</html>

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

回答2件

ベストアンサー

ざっくりリファクタリングして

javascript
1<script>
2HTMLElement.prototype.trigger=function(eventStr){
3    var e = document.createEvent("HTMLEvents");
4    e.initEvent(eventStr, true, true );
5    return this.dispatchEvent(e);
6};
7window.addEventListener('DOMContentLoaded', ()=>{
8  var s1=document.querySelector('[name=selectName1]');
9  var s2=document.querySelector('[name=selectName2]');
10  var cls={
11    "jr-high":["1","2","3","4"],
12    "high":["A","B","C","D","E","F","G","H","I","J","K","L"],
13  };
14  s1.addEventListener('change',()=>{
15    while(opt=s2.querySelector('option')){
16      s2.removeChild(opt);
17    }
18    cls[s1.value].forEach(x=>{
19      var opt=document.createElement("option");
20      opt.setAttribute("value",x);
21      opt.textContent=x;
22      s2.appendChild(opt);
23    });
24  });
25  s1.trigger('change');
26});
27</script>
28<form method="POST">
29<table class="formTable">
30  <tbody>
31    <tr>
32      <th>お名前 <span class="must">※必須</span></th>
33      <td><input size="25" type="text" name="name"></td>
34    </tr>
35    <tr>
36      <th>学校 <span class="must">※必須</span></th>
37      <td>
38        <select name="selectName1">
39          <option value="jr-high">中学</option>
40          <option value="high">高校</option>
41        </select>
42      </td>
43    </tr>
44    <tr>
45      <th>クラス <span class="must">※必須</span></th>
46      <td>
47        <select name="selectName2"></select>
48      </td>
49    </tr>
50    <tr>
51      <th>お問い合わせ内容 <span class="must">※必須</span><br></th>
52      <td><textarea name="iken" cols="50" rows="5"></textarea></td>
53    </tr>
54  </tbody>
55</table>
56<p>
57  <input type="submit" value="送信">　
58  <input type="reset" value="リセット">
59</p>
60</form>
61</div>