如何在第二次选择中自动选择与第一次选择中选择的数字选项相同的数字选项？

Question

Bootstrap 和 JavaScript 的新手。<select id="list1" name="list1" class="form-control" required/><?phpfor ($h = 1; $h <= 7; $h++) echo "<option value='$h'>$h</option>";?></select><select id="list2" name="list2" class="form-control" required/><?phpfor ($h = 1; $h <= 7; $h++) echo "<option value='$h'>$h</option>";?></select>我有 2 个选择，每个选项值 1-7。当用户在 list1 中选择一个数字时，我希望在 list2 中自动选择相同的数字。

Answer 1

您可以使用selectedIndex以下属性HTMLSelectElement：

const firstList = document.getElementById('list1');

const secondList = document.getElementById('list2');

firstList.addEventListener('change', () => {

  secondList.selectedIndex = firstList.selectedIndex;

});

<select id="list1" name="list1" class="form-control" required>

  <option value='1'>1</option>

  <option value='2'>2</option>

  <option value='3'>3</option>

</select>

<select id="list2" name="list2" class="form-control" required>

  <option value='1'>1</option>

  <option value='2'>2</option>

  <option value='3'>3</option>

</select>