Javascriptで質問です。

質問

以前こちらで質問をして retorofan さんに追加のscriptを詳しく教えていただき、実際の表示もほぼうまくいったのですが、選択ごとに表示位置が変わってしまってうまくいきません。inlineの部分をblockにしてだいぶ良くなったのですが、それでもまだ一定位置に出てくれません。どこを修正すれば一定位置に画像を出せるのでしょうか？

<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>
//------------------------------------------------------------------------------
// 初期画面の表示内容
//「年」「月」画像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"; //縦並び
}
});
//----------------------------------------------------------
});

回答No.1

babu_baboo · ベストアンサー

全角空白文字じゃね？

お礼

ありがとうございました！ここは見落としていました。
解決しました。