如何根据所选的另一个选择选项更改选择选项？

<select id="firstSelect">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select id="secondSelect">
    <!-- 初始选项 -->
</select>

document.getElementById('firstSelect').addEventListener('change', function() {
    var firstSelectValue = this.value;
    var secondSelect = document.getElementById('secondSelect');
    // 清空第二个选择框的选项
    secondSelect.innerHTML = '';

    // 根据第一个选择框的值来设置第二个选择框的选项
    if (firstSelectValue == '1') {
        secondSelect.innerHTML = '<option value="a">Option A</option><option value="b">Option B</option>';
    } else if (firstSelectValue == '2') {
        secondSelect.innerHTML = '<option value="c">Option C</option><option value="d">Option D</option>';
    } else if (firstSelectValue == '3') {
        secondSelect.innerHTML = '<option value="e">Option E</option><option value="f">Option F</option>';
    }
});