Javascriptで質問です。

質問

度々すみません。以下のようにセレクトボックスを２段階、「年」「月」を選択後に画像を３つ出力するコードでほぼ出来上がっているのですが、初期に画像を出しておきたいので、表示としては
「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg）が初期画面で出るようにしたいのです。
詳しい方がいらっしゃいましたら、教えていただければ嬉しいです。よろしくお願いいたします。

<form>
<div class="pulldownset vegetable">
<select id="cate" class="subbox" >
<option value="">年</option>
<option value="ha">2023年</option>
<option value="ne">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="ne" class="subbox2">
<option value="">月を選択</option>
<option value="ne1">1月</option>
<option value="ne2">2月</option>
<option value="ne3">3月</option>
</select>

</div>

</form>
<!-- 画像1 -->
<div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div>　
<div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div>
<div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div>　

<div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div>　　　
<div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div>　　　
<div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div>　　

<!-- 画像2 -->
<div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div>　
<div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div>
<div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div>　

<div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div>　　　
<div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div>　　　
<div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div>　　

<!-- 画像3 -->
<div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div>　
<div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div>
<div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div>　

<div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div>　　　
<div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div>　　　
<div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></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>

<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[0].selected = true;
ha.options[0].selected = true;

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

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

回答No.1

retorofan · ベストアンサー

ご希望としては、次のとおりですね。

「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg）が初期画面で出るようにしたい

そのサンプルコードをお示しする前に２点の確認を。
第一点 「年」「月」２つのセレクトボックスで済むのにもう一個は
　　　　どういう用途か回答者には伝わらない
第二点 　ＩＤの付け方の誤り
　　　　　ページ内において、
　　　　　ＩＤはユニーク（唯一）でなければならない（大原則）

例えば、以下は同じＩＤが２か所に付けられています。
<!-- 画像1 -->
<div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div>
・・・・・・・
<!-- 画像2 -->
<div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div>

画像ファイルはクラス「subbox3」でグループ化されているため、
それでアクセスできるので、ＩＤは不要です。

先ほど追加したコードと下記のコードを差し替えて、お試しください。
【サンプルコード】

<script>
//------------------------------------------------------------------------------
// 初期画面の表示内容
//「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg）
//------------------------------------------------------------------------------

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

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

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

[...subbox3].forEach(function(elem, index){
if (index % 6 == 0){
elem.style.display="inline-block"; //横並び
//elem.style.display="block"; //縦並び
}
});
//----------------------------------------------------------
});

以上

お礼

今回もどうもありがとうございました！
出力する画像が増えてくれば、
if (index % 6 == 0){
の6の数字を変化させていけばいいのですね。
助かりました。