如何在第二個 select 中自動選擇與第一個 select 中選擇的相同的數字選項？

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>