Vanilla Javascript multiple same selects, when you select 1 option, all other selects change to the same option

Issue

if we have for example 3 same selects in the same page, but on different parts of the page

<div>
<select>
    <option value="london">London</option>
    <option value="paris">Paris</option>
</select>
</div>
<div>
<select>
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
</select>
</div>
<div>
  <p> hello </p>
</div>
<div>
  <p> This is a random sentence </p>
</div>
<select>
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
</select>
<div>
  <p> Bye </p>
</div>
<div>
  <p> This is a random second sentence </p>
</div>
<select>
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
</select>

I want that if i select for example 2 in the first select the other 2 selects change to option value="two" too. Is this possible? Thanks :)

Solution

I would delegate.

Change container to the nearest static container holding all selects or wrap them

Here I gave the selects I want to sync a class

const selects = document.querySelectorAll("select.sync");
document.addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("sync")) {
    const idx = tgt.selectedIndex;
    selects.forEach(sel => sel.selectedIndex = idx);
  }
})

<div>
  <select>
    <option value="london">London</option>
    <option value="paris">Paris</option>
  </select>
</div>
<div>
  <select class="sync">
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
  </select>
</div>
<div>
  <p> hello </p>
</div>
<div>
  <p> This is a random sentence </p>
</div>
<select class="sync">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
</select>
<div>
  <p> Bye </p>
</div>
<div>
  <p> This is a random second sentence </p>
</div>
<select class="sync">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
</select>

Answered By - mplungjan