JavaScript 複数のIDがある時の処理

質問

時々お世話になっております。今回はJavaScriptを始めたばかりでどうにもイメージが湧かずに質問させて頂きます。以下のサイトでformのselectを選択したら情報が表示されるものを作りたいと思い、イメージに近いソースを拝見しました。

https://memorva.jp/memo/html/javascript_onchange_select_menu.php

ーーーー以下HTMLーーーー
<form action="#" method="post" name="form">
<select name="kaizoudo" id="kaizoudo">
<option value="manual">手入力（以下のテキストボックス）</option>
<option value="8k">8K（7680×4320）</option>
<option value="4k">4K（3840×2160）</option>
<option value="fhd">FHD（1920×1080）</option>
<option value="hd">HD（1280×720）</option>
</select>

<br />
画面の横のピクセル数<br />
<input type="text" value="" name="yoko" id="yoko"><br />
画面の縦のピクセル数<br />
<input type="text" value="" name="tate" id="tate"><br />
</form>

ーーーー以下JavaScriptーーーー

<script>
document.getElementById("kaizoudo").onchange = function(){
var kaizoudo = document.getElementById("kaizoudo");
var dw = '';
var dh = '';

switch(kaizoudo.value){
case 'manual':
dw = '';
dh = '';
break;
case '8k':
dw = 7680;
dh = 4320;
break;
case '4k':
dw = 3840;
dh = 2160;
break;
case 'fhd':
dw = 1920;
dh = 1080;
break;
case 'hd':
dw = 1280;
dh = 720;
break;
}

document.getElementById("yoko").value = dw;
document.getElementById("tate").value = dh;
};
</script>

ーーーーここまでーーーー

問題はこれを複数のselectを選択できるようにしたいのですが、どのように設定すれば良いのかイメージが湧きません。。。
＜イメージ＞
商品1　選択肢　選択した情報（yoko）　選択した情報（tate）
商品2　選択肢　選択した情報（yoko）　選択した情報（tate）
商品3　選択肢　選択した情報（yoko）　選択した情報（tate）
・
・
・
【送信】

※選択肢は全て同じです

当然IDはユニークなためid="kaizoudo"を繰り返し使う訳にはいかないので、kaizodo1,kaizodo2のように固有のIDを作りselectを設置するようになると思いますが、JavaScriptをIDごとに書くには字数が多くなりますし、選択肢はこれよりもっと多くなることを想定しておりますので、できればWhileやforで反復処理できないかと考えております。
（PHPなら少々分かるのですが、JavaScriptはまだ勉強しておらず）

上記内容にてヒントを頂ける方がいらっしゃいましたら、よろしくお願い致します。

回答No.1

Proof4 · ベストアンサー

複数の<select>にkaizoudo_1, kaizoudo_2, ... のようにidを与える場合、それらすべての要素は
document.querySelectorAll('[id^=kaizoudo]')
によりNodeList（配列と同様のものです）として取得できます。ここで、[id^=kaizoudo] はCSSの属性セレクタであり、idの値が"kaizoudo"で始まる要素すべてを取得します。

以上を踏まえると、for文によって複数の<select>に対応することができます。実装例は下記のようになります。選択した情報のidはyoko_1, yoko_2, ... であるとします。

const kaizoudoSelects = document.querySelectorAll('[id^=kaizoudo]');
for (select of kaizoudoSelects) {
select.addEventListener('change', function () {
var dw = '';
var dh = '';

switch (select.value) {
case 'manual':
dw = '';
dh = '';
break;
case '8k':
dw = 7680;
dh = 4320;
break;
case '4k':
dw = 3840;
dh = 2160;
break;
case 'fhd':
dw = 1920;
dh = 1080;
break;
case 'hd':
dw = 1280;
dh = 720;
break;
}

// idから番号を取得
const n = select.id.split('_')[1];
document.getElementById(`yoko_${n}`).value = dw;
document.getElementById(`tate_${n}`).value = dh;
});
}

質問文のコードでは要素のonchangeプロパティに変更時の動作を記述していましたが、実装例ではaddEventListenerメソッドを利用して同等の動作を実現しています。addEventListenerを用いるメリットについては https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#why_use_addeventlistener をご覧ください。

補足

早速ご回答頂きましてありがとうございます！サンプルに沿って作ってみたのですが、Chromeで見ると2番目だけが機能しておりまして、どこか記述に間違いがあるのでしょうか。。。

ーーー以下サンプルソースーーー
<form action="#" method="post" name="form">
<select name="kaizoudo_1" id="kaizoudo_1">
<option value="manual">手入力（以下のテキストボックス）</option>
<option value="8k">8K（7680×4320）</option>
<option value="4k">4K（3840×2160）</option>
<option value="fhd">FHD（1920×1080）</option>
<option value="hd">HD（1280×720）</option>
</select>

<br />
画面の横のピクセル数<br />
<input type="text" value="" name="yoko_1" id="yoko_1"><br />
画面の縦のピクセル数<br />
<input type="text" value="" name="tate_1" id="tate_1"><br />

<select name="kaizoudo_2" id="kaizoudo_2">
<option value="manual">手入力（以下のテキストボックス）</option>
<option value="8k">8K（7680×4320）</option>
<option value="4k">4K（3840×2160）</option>
<option value="fhd">FHD（1920×1080）</option>
<option value="hd">HD（1280×720）</option>
</select>
<br />
画面の横のピクセル数<br />
<input type="text" value="" name="yoko_2" id="yoko_2"><br />
画面の縦のピクセル数<br />
<input type="text" value="" name="tate_2" id="tate_2"><br />
</form>

<script>
const kaizoudoSelects = document.querySelectorAll('[id^=kaizoudo]');
for(select of kaizoudoSelects){
select.addEventListener('change', function () {
var dw = '';
var dh = '';

switch (select.value) {
case 'manual':
dw = '';
dh = '';
break;
case '8k':
dw = 7680;
dh = 4320;
break;
case '4k':
dw = 3840;
dh = 2160;
break;
case 'fhd':
dw = 1920;
dh = 1080;
break;
case 'hd':
dw = 1280;
dh = 720;
break;
}

// idから番号を取得
const n = select.id.split('_')[1];
document.getElementById(`yoko_${n}`).value = dw;
document.getElementById(`tate_${n}`).value = dh;
});
}
</script>

ーーーここまでーーー

調べてはみたものの自力では理解が難しいようです。。。もしお分かりでしたら教えて頂けると幸いです。よろしくお願い致します。

回答No.2

Proof4

回答No.1の補足に対して回答します。
動作検証をおろそかにしていたため、回答No.1の実装例に誤りがありました。コールバック関数の内部では下記のようにselectをthisに変更してください。

select.addEventListener('change', function () {
var dw = '';
var dh = '';

switch (this.value) {
case 'manual':
dw = '';
dh = '';
break;
case '8k':
dw = 7680;
dh = 4320;
break;
case '4k':
dw = 3840;
dh = 2160;
break;
case 'fhd':
dw = 1920;
dh = 1080;
break;
case 'hd':
dw = 1280;
dh = 720;
break;
}

// idから番号を取得
const n = this.id.split('_')[1];
document.getElementById(`yoko_${n}`).value = dw;
document.getElementById(`tate_${n}`).value = dh;
});

お礼

迅速なご回答ありがとうございます！エディターでそこの行でエラーが出ていたのですが、私には何が原因のエラーだったのか分からなかったので大変助かりました。頂いたソースで期待通りの動作が確認できました。これからしっかり勉強していきたいと思います。本当にありがとうございました。