複数の<select>（プルダウン）を同時選択をしたいです。（もしくはひとつを選択すると、他の<select>も同期したいです）

実現したいこと

ひとつのセレクトボックスを決定すると、
他のボックスも同じ値に選択された状態にしたいです。

（例）下記ソースコードにて
商品1のセレクトボックスの値を「東京」にすると、
商品2、商品3のセレクトボックスも同時に「東京」が選択された状態に。

※「大阪」を選択すると、他も「大阪」に、「京都」を選択すると「京都」になるように。
※商品2、商品3を選んだ場合も同様です。

JSの知識が疎いものでして、、
ご教示くださいませ。
よろしくお願いいたします。

該当のソースコード

<div class="select-box">
    <p class="title">商品１</p>
    <select class="selbox" name="" onchange="">
        <option value="" hidden>選択してください</option>
        <option value="sample1">東京</option>
        <option value="sample2">京都</option>
        <option value="sample3">大阪</option>
    </select>
</div>

<div class="select-box">
    <p class="title">商品２</p>
    <select class="selbox" name="" onchange="">
        <option value="" hidden>選択してください</option>
        <option value="sample1">東京</option>
        <option value="sample2">京都</option>
        <option value="sample3">大阪</option>
    </select>
</div>

<div class="select-box">
    <p class="title">商品３</p>
    <select class="selbox" name="" onchange="">
        <option value="" hidden>選択してください</option>
        <option value="sample1">東京</option>
        <option value="sample2">京都</option>
        <option value="sample3">大阪</option>
    </select>
</div>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<script>
2document.addEventListener('change',({target})=>{
3  if(target.matches('select')){
4    document.querySelectorAll('.selbox').forEach(x=>{
5      x.value=target.value;
6    });
7  } 
8})
9
10</script>
11<div class="select-box">
12    <p class="title">商品１</p>
13    <select class="selbox" name="" onchange="">
14        <option value="" hidden>選択してください</option>
15        <option value="sample1">東京</option>
16        <option value="sample2">京都</option>
17        <option value="sample3">大阪</option>
18    </select>
19</div>
20
21<div class="select-box">
22    <p class="title">商品２</p>
23    <select class="selbox" name="" onchange="">
24        <option value="" hidden>選択してください</option>
25        <option value="sample1">東京</option>
26        <option value="sample2">京都</option>
27        <option value="sample3">大阪</option>
28    </select>
29</div>
30
31<div class="select-box">
32    <p class="title">商品３</p>
33    <select class="selbox" name="" onchange="">
34        <option value="" hidden>選択してください</option>
35        <option value="sample1">東京</option>
36        <option value="sample2">京都</option>
37        <option value="sample3">大阪</option>
38    </select>
39</div>