連動プルダウン 選択した値によって表示を切り替えたい

Question

質問させていただきます。
連動のプルダウンで、2つめのプルダンで選択した値を引き継ぎ、
表示が切り替わるようにしたいのですが、
どのようにソースをかけば良いかご教示いただけませんでしょうか。

ソースを書かせていただきます。

<form>
<div class="pulldownset vegetable">
<select id="cate" class="subbox" >
<option value="">種類を選択</option>
<option value="ha">葉菜類</option>
<option value="ne">根菜類</option>
<option value="ka">果菜類</option>
</select>

<select id="ha" class="subbox2">
<option value="">葉菜類を選択</option>
<option value="ha1">キャベツ</option>
<option value="ha2">ほうれん草</option>
<option value="ha3">レタス</option>
<option value="ha4">セロリ</option>
</select>

<select id="ne" class="subbox2">
<option value="">根菜類を選択</option>
<option value="ne1">大根</option>
<option value="ne2">にんじん</option>
<option value="ne3">ゴボウ</option>
</select>

<select id="ka" class="subbox2">
<option value="">果菜類を選択</option>
<option value="ka1">キュウリ</option>
<option value="ka2">カボチャ</option>
<option value="ka3">トマト</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</div>


</form>


<!--<div id="ha1">キャベツを選択しました</div>　
<div id="ha2">ほうれん草を選択しました</div>　
<div id="ha3">レタスを選択しました</div>　
<div id="ne1">大根を選択しました</div>　
<div id="ne2">ニンジンを選択しました</div>　
<div id="ne3">ゴボウを選択しました</div>　
<div id="ka1">キュウリを選択しました</div>　
<div id="ka2">カボチャを選択しました</div>　
<div id="ka3">トマトを選択しました</div>-->


<script type="text/javascript">

// HTMLの読み込み直後に実行：
document.addEventListener('DOMContentLoaded', function() {

  // DOMContentLoaded内

    // 2. 表示/非表示を一気に更新する（表示条件は、引数と一致する id のサブBOX）
    var dispSubBox = function(subId) {
      [...document.querySelectorAll(".subbox2")].forEach(function(elm){
        elm.style.display = elm.id===subId ? "inline": "none"
      });
    }
    dispSubBox(); // 一致する id がないので全て 非表示になる。

    // 1. select.subbox の操作で値が変わると発火するイベント
    document.getElementById("cate").addEventListener("cange", function(event){
      var elm = event.target; // select#id になる。
      //console.log( elm.id ); // "cate"
      //console.log( elm.value ); // サブBOXに与えた id と同じ
      dispSubBox( elm.value ); // 全更新：一致idだけ表示
    });

});
</script>

例えば、「キャベツ」と選んだら、option valueの「ha1」がdivのidになり
プルダウンで選択する内容によって切り替わるようにしたいです。

プルダウンが1つの時はできたのですが、2つになった時にうまくいかず、
教えていただけますと幸いです。
何卒、どうぞよろしくお願いいたします。

Comments

[rjunakc]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[mikiko]

すいません。ご指摘ありがとうございます。

Answer 1

イベントリスナは受け取った引数から、操作された要素を取得できます。

<form> 内の４つの <select> のうち

1. 最初の<select> が変化すると、サブBOXの id を value から得るイベントを考える。
2. サブBOX（他の<select>）の表示/非表示処理は 指定id だけが表示されるような全更新を ユーザ関数 で実装する。

---

ご質問のHTMLにおいて、イベント定義しやすくするため select.subboxに id="cate" を追加した場合、以下のように実装できます。

// DOMContentLoaded内

  // 2. 表示/非表示を一気に更新する（表示条件は、引数と一致する id のサブBOX）
  var dispSubBox = function(subId) {
    [...document.querySelectorAll(".subbox2")].forEach(function(elm){
      elm.style.display = elm.id===subId ? "inline": "none"
    });
  }
  dispSubBox(); // 一致する id がないので全て 非表示になる。

  // 1. select.subbox の操作で値が変わると発火するイベント
//document.getElementById("cate").addEventListener("cange", function(event){
  document.getElementById("cate").addEventListener("change", function(event){
    var elm = event.target; // select#id になる。
    //console.log( elm.id ); // "cate"
    //console.log( elm.value ); // サブBOXに与えた id と同じ
    dispSubBox( elm.value ); // 全更新：一致idだけ表示
  });

MDN

• 条件（三項）演算
• Event.target
• DOcument.querySelectorAll()
• スプレッド構文 で配列化し、forEach でループ。

Comments

[mikiko]

丁寧にご回答いただき、ありがとうございます。

私の理解が足らずすみません。

●formの中の一つ目のselectは次のようになるということですね。
<select class="subbox" id="cate">

●また、JavaScriptは、下記の中に、教えていただいたソースのみを記述するということでしょうか？

document.addEventListener('DOMContentLoaded', function() {

});
</script>
JavaScriptがよくわかっておらず、すみません。
ご教示いただけますと幸いです。

[AkitoshiManabe]

●2点については、そのとおりです。
> JavaScriptがよくわかっておらず
コード内にMDNのページを示していますので、参考にしてみてください。

[mikiko]

ありがとうございます。ソースを上書きしたのですが、うまくいっておりません。私の方で間違っていると思うのですが、ご覧いただけないでしょうか。

[AkitoshiManabe]

回答にタイプミスがありましたので訂正します。
(イベントタイプ change と書くべき箇所を cange となっていました)

[mikiko]

ありがとうございます。直しまして、動きました。
あとひとつお聞きしたいのですが、例えば「キャベツ」を選んだとき、<div id="ha"></div>と表示させたいのですが、今のソースからどのように書き足せば良いでしょうか。何度も申し訳ありません。

[AkitoshiManabe]

今回の応用ですね。select#ha にイベント定義して、event.target.value で切り分ける。現状、<!-- --> でコメント内の div について全更新をかける。今回の処理を一つ一つを理解することが大事ですので、リファレンスを何度も読み返し、理解を深めながら挑戦してみてください。

[mikiko]

うまくいきました。この度はありがとうございました！

Answer 2

var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
mainSelect[0].onchange = function () {
}

上記のようにクラス「mainselect」を変更した時にしか実行されません。
よってキャベツの属するクラス「subbox」を変更してもなにもイベントが発火しません。

簡単に考えるなら、クラス「mainselect」のコードをそのままクラス「subbox」に置き換えて、
3階層目のselectをクラス「subbox2」などで作ってしまうのはいかがでしょう。

Comments

[mikiko]

ソースを修正いたしましたが、いかがでしょうか。