javascript - Выберите раскрывающийся список при смене с «другим выбором»

Question

my-select является основным, когда его выбирают пользователи, он открывает всплывающее окно (что работает прямо сейчас), но я хочу, чтобы когда я выбираю my-select2, оно также должно изменять значение.

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="my-select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>


document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

Answer 1

есть очень простой способ сделать это.

В слушателе изменений вы просто вызываете другой select и меняете его выбранный индекс после применения вашего собственного logi c.

Пожалуйста, проверьте код здесь:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
  document.getElementById("my-select2").selectedIndex = this.selectedIndex;

});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="my-select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 2

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
  selectOptionInMySelect2(this.value)
});

function selectOptionInMySelect2(value) {

  const selectElement = document.getElementById('my-select2');
  const allOptions = selectElement.options;

  for(let i=0; i < allOptions.length; i++) {

    if(allOptions[i].value == value) {
      selectElement.selectedIndex = i;
      break;
    }
  }
}

Включены те же идентификаторы и значения, что и в вашем фрагменте. Рабочий пример здесь

Я не осознавал, что ответ уже был опубликован, пока я не редактировал это. Вау, сообщество!

На всякий случай, последовательность опций не одинакова в обоих вариантах , это сработает. Ура!