Javascriptで質問です。

質問

セレクトボックスを２段階選択後にテキストを出力する以下のコードがあるのですが、現状では１段階のセレクトボックスを選択しないと２段階目のボックスが出て来ません。
これを最初から２段階目のボックスを表示して、出力するテキストもデフォルトのもの（最上段のもの）を最初から出力したいのです。

詳しい方がいらっしゃいましたらご教示いただけると幸いです。よろしくお願いいたします。

<form>
<div class="pulldownset vegetable">
<select id="cate" class="subbox" >
<option value="">年</option>
<option value="ha">2023</option>
<option value="ka">2024</option>
</select>

<select id="ha" class="subbox2">
<option value="">月</option>
<option value="ha1">1月</option>
<option value="ha2">2月</option>
<option value="ha3">3月</option>
</select>

<select id="ka" class="subbox2">
<option value="">月</option>
<option value="ka1">1月</option>
<option value="ka2">2月</option>
<option value="ka3">3月</option>
</select>
</div>
</form>
<div id="ha1" class="subbox3">2023-1月</div>
<div id="ha2" class="subbox3">2023-2月</div>
<div id="ha3" class="subbox3">2023-3月</div>

<div id="ka1" class="subbox3">2024-1月</div>
<div id="ka2" class="subbox3">2024-2月</div>
<div id="ka3" class="subbox3">2024-3月</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>

回答No.1

retorofan · ベストアンサー

現在の仕様は、
＞現状では１段階のセレクトボックスを選択しないと２段階目のボックスが出て来ません。

仕様変更は、
これを最初から２段階目のボックスを表示して、出力するテキストもデフォルトのもの（最上段のもの）を最初から出力したいのです。

ということは、次の要件を満たせばよいことになります。
・１段階目のセレクトボックスを選択
・２段階目のセレクトボックスを選択
・最上段のテキスト（2023-1月）も最初から出力

現在のコードの下部に
次のコードを記述して
お試しになってみてください。

<script>
window.addEventListener('DOMContentLoaded', ()=>{

// 追加 2023-04-21 11:05
//----------------------------------------------------------
const cate = document.getElementById("cate");
const ha = document.getElementById("ha");
const subbox3 = document.querySelectorAll(".subbox3");

ha.style.display ="";
cate.options[1].selected = true;
ha.options[1].selected = true;

let v = cate.options[1].text+"-"+ ha.options[1].text;

[...subbox3].forEach(function(elem){
if (elem.textContent==v){elem.style.display="block"}
});
//----------------------------------------------------------
});

お礼

早速ありがとうございます！流石です！！非常に助かりました。
jsはなかなかとっつきにくくて自分だけではうまくいかないので。

またここで質問することではないのかもしれませんが、このコードを同一ページで複数設置するとうまく動かないようです。こちらは何か対策方法ありますでしょうか？