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

Question

Bootstrap 和 JavaScript 的新功能。

<select id="list1" name="list1" class="form-control" required/>
<?php
for ($h = 1; $h <= 7; $h++) echo "<option value='$h'>$h</option>";
?>
</select>

<select id="list2" name="list2" class="form-control" required/>
<?php
for ($h = 1; $h <= 7; $h++) echo "<option value='$h'>$h</option>";
?>
</select>

我有 2 个选择，每个选项值为 1-7。 当用户在 list1 中选择一个数字时，我希望在 list2 中自动选择相同的数字。

谢谢

Answer 1

您可以使用HTMLSelectElement的selectedIndex属性：

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>