一旦我在第一个下拉菜单中选择了一个不同的选项，我如何让我的第三个动态下拉菜单重置？

<!-- HTML代码 -->
<select id="firstDropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<select id="thirdDropdown">
  <!-- 第三个下拉菜单的选项将在JavaScript中动态生成 -->
</select>

<script>
  // JavaScript代码
  const firstDropdown = document.getElementById('firstDropdown');
  const thirdDropdown = document.getElementById('thirdDropdown');

  firstDropdown.addEventListener('change', function(event) {
    const selectedOption = event.target.value;

    // 清空第三个下拉菜单的选项
    thirdDropdown.innerHTML = '';

    // 根据第一个下拉菜单的选项值，生成第三个下拉菜单的选项
    if (selectedOption === 'option1') {
      // 生成第三个下拉菜单的选项1
      const option1 = document.createElement('option');
      option1.value = 'option1-1';
      option1.textContent = '选项1-1';
      thirdDropdown.appendChild(option1);

      // 生成第三个下拉菜单的选项2
      const option2 = document.createElement('option');
      option2.value = 'option1-2';
      option2.textContent = '选项1-2';
      thirdDropdown.appendChild(option2);

      // ...
    } else if (selectedOption === 'option2') {
      // 生成第三个下拉菜单的选项1
      const option1 = document.createElement('option');
      option1.value = 'option2-1';
      option1.textContent = '选项2-1';
      thirdDropdown.appendChild(option1);

      // 生成第三个下拉菜单的选项2
      const option2 = document.createElement('option');
      option2.value = 'option2-2';
      option2.textContent = '选项2-2';
      thirdDropdown.appendChild(option2);

      // ...
    } else if (selectedOption === 'option3') {
      // 生成第三个下拉菜单的选项1
      const option1 = document.createElement('option');
      option1.value = 'option3-1';
      option1.textContent = '选项3-1';
      thirdDropdown.appendChild(option1);

      // 生成第三个下拉菜单的选项2
      const option2 = document.createElement('option');
      option2.value = 'option3-2';
      option2.textContent = '选项3-2';
      thirdDropdown.appendChild(option2);

      // ...
    }
  });
</script>