Javascript更改多個 <select>到第一個選擇的相同選項

Question

第一次發布，因此對於任何禮節錯誤我深表歉意。

我正在嘗試制作一個HTML頁面來替換用於檢查建築工地的Flash頁面。 當前的閃存將幾個字段更改為與“總體評級”相同的選項。 到目前為止，我擁有的html如下：

<label for="inspectDate">
    Inspection Date:
</label>
<br>
<input type="date" id="inspectDate" name="inspectDate" class="xsmall">
<p>
    <label for="overallRating">Overall Rating
        <br>
        <select id="overallRating" name="overallRating">
            <option value="null"></option>
            <option value="good">Good</option>
            <option value="fair">Fair</option>
            <option value="poor">Poor</option>
        </select>
        <p>
            <label for="generalAppearance">General Appearance
                <br>
                <select id="generalAppearance" name="generalAppearance">
                    <option value="null"></option>
                    <option value="good">Good</option>
                    <option value="fair">Fair</option>
                    <option value="poor">Poor</option>
                    <option value="n/a">N/A</option>
                </select>
            </label>
        </p>
    </label>
</p>

我對js的了解很少，並且我正在自學。 如果有人可以幫助我解決第一個問題，那么我可以根據需要推斷出盡可能多的選擇字段

Answer 1

簡化的演示：

 let bubu = document.querySelectorAll('.bubu'); // In JS count starts from 0. bubu[0] — the first element of the colletion. bubu[0].value = undefined; bubu[0].addEventListener('change', function(){ for( let i = 1; i < bubu.length; i++ ){ bubu[i].selectedIndex = this.selectedIndex; // `this` - the element, which fired the function. The same as `bubu[0]` } }); 

 select { width: 100px; } 

 <select class="bubu"> <option></option> <option>1</option> <option>2</option> <option>3</option> </select> - Main <hr><br><br><br><br> <select class="bubu"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>N/A</option> </select> - First <hr> <select class="bubu"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>N/A</option> </select> - Second