<select>の<option>群を動的に生成

Question

前提・実現したいこと

数日前より触り始めた初心者です。以下のプログラムを作成したく、ご助力いただければと思います。

2つの選択リストより、1つ目の選択内容によって2つ目の選択肢が変える。
例）
1つ目の選択：1の時、2つ目の選択肢：A、B、C
1つ目の選択：2の時、2つ目の選択肢：D、E、F
1つ目の選択：3の時、2つ目の選択肢：G、H、I

また1つ目を選択しないと2つ目が選択できない。

該当のソースコード

gkubun = document.getElementById("gkubun" + nameid);
gkubun_selector = [ "--", "1", "2", "3" ];
for (i = 0; i < gkubun_selector.length; i++) {
option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = gkubun_selector[i];
console.log("new option[" + i + "] " + option.innerHTML);
gkubun.appendChild(option);
}

gnaiyou = document.getElementById("gnaiyou" + nameid);
gnaiyou_selector = [ "--", "Ａ", "Ｂ", "Ｃ", "Ｄ", "Ｅ", "Ｆ", "Ｇ", "Ｈ", "Ｉ" ];
for (i = 0; i < gnaiyou_selector.length; i++) {
option = document.createElement("option");
option.setAttribute("value", i);
option.innerHTML = gnaiyou_selector[i];
console.log("new option[" + i + "] " + option.innerHTML);
gnaiyou.appendChild(option);
}

Answer 1

こんな感じが良いでしょう

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var s2=document.querySelector('#s2');
  var s2c=s2.cloneNode(true);
  s2c.removeAttribute('id');
  s2c.removeChild(s2c.querySelector('option'));
  [].forEach.call(s2.querySelectorAll('option:not([value=""])'),function(x){
    s2.removeChild(x);
  });
  document.querySelector('#s1').addEventListener('change',function(e){
    s2.selectedIndex=0;
    var v=e.target.value;
    [].forEach.call(s2.querySelectorAll('option:not([value=""])'),function(x){
      s2.removeChild(x);
    });
    [].forEach.call(s2c.querySelectorAll('option'),function(x){
      if(x.classList.contains(v)) s2.appendChild(x.cloneNode(true));
    });
  });
});
</script>
<select id="s1">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="s2">
<option value="">--</option>
<option value="a" class="1">a</option>
<option value="b" class="1">b</option>
<option value="c" class="1">c</option>
<option value="d" class="2">d</option>
<option value="e" class="2">e</option>
<option value="f" class="2">f</option>
<option value="g" class="3">g</option>
<option value="h" class="3">h</option>
<option value="i" class="3">i</option>
</select>

Comments

[krnk3451]

ご回答ありがとうございました。詳細に記載いただきわかりやすかったです。

Answer 2

こちらが参考になるかと。
セレクトメニューの内容を動的に変えるには(JavaScript)