2段階連動セレクトボックスでの表示切り替え JavaScript

こちらで初めて質問させていただきます。


JavaScriptが完全初心者で、下記についてご教示いただきたいです。
下記、連動のセレクトボックスなのですが、
二つ目のセレクトボックスで選択した内容によって表示が
切り替えられるようにしたいのですが、今、ソースが足りずうまくいっていません。
どのように書き足せば良いか、教えていただけないでしょうか。
例えば、「キャベツ」を選択すれば、「キャベツを選択しました」と
表示されるようにしたいです。
何卒、どうぞよろしくお願いいたします。


ソースです。

<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>
</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 …
</div>
</form>


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




<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var dispSubBox = function(subId) {
[...document.querySelectorAll(".subbox2")].forEach(function(elm){
elm.style.display = elm.id===subId ? "inline": "none"
});
}
dispSubBox();
document.getElementById("cate").addEventListener("change", function(event){
var elm = event.target;
dispSubBox( elm.value );
});

});
</script>


<style>
div { width:300px; display:block; }
</style>

No.2 回答者： yambejp 回答日時： 2020/05/15 20:54

一応こんな感じで・・・subbox2と3にわけました

<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>
</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>
</div>
</form>
<div id="ha1" class="subbox3">キャベツを選択しました</div>　
<div id="ha2" class="subbox3">ほうれん草を選択しました</div>
<div id="ha3" class="subbox3">レタスを選択しました</div>　
<div id="ne1" class="subbox3">大根を選択しました</div>　　　
<div id="ne2" class="subbox3">にんじんを選択しました</div>　　　
<div id="ne3" class="subbox3">ゴボウを選択しました</div>　　
<div id="ka1" class="subbox3">キュウリを選択しました</div>　
<div id="ka2" class="subbox3">カボチャを選択しました</div>　
<div id="ka3" class="subbox3">トマトを選択しました</div>　　




<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{
x.style.display ="none";
});
document.querySelector("#cate").addEventListener('change',e=>{
document.querySelectorAll(".subbox2").forEach(x=>{
x.value="";
x.style.display =x.getAttribute("id")===e.target.value?"inline":"none";
});
document.querySelectorAll(".subbox3").forEach(x=>{
x.style.display ="none";
});
});
document.querySelectorAll(".subbox2").forEach(x=>{
x.addEventListener('change',e=>{
document.querySelectorAll(".subbox3").forEach(y=>{
y.style.display =y.getAttribute("id")===e.target.value?"inline":"none";
});

});
});
});
</script>


<style>
div { width:300px; display:block; }
</style>

この回答へのお礼

ありがとうございます！！！仕事で修正があり、javascriptに詳しくなくて、いろんなサイトを見てもうまくいかず、途方にくれていました。このソースを元に、修正作業をしてみます。本当にありがとうございます。

お礼日時：2020/05/15 22:59

No.1 回答者： yambejp 回答日時： 2020/05/15 20:26

途中にjQueryのscriptタグが挿入されていますが、jsでしか動作してないので

いらないですよね？

この回答へのお礼

確かにそうですね。。ご指摘ありがとうございます！

お礼日時：2020/05/15 23:00