当我从下拉列表中选择选项时，隐藏的下拉列表不可见

<select id="mainList">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<select id="hiddenList">
  <option value="hiddenOption1">隐藏选项1</option>
  <option value="hiddenOption2">隐藏选项2</option>
  <option value="hiddenOption3">隐藏选项3</option>
</select>

document.getElementById('mainList').addEventListener('change', function() {
  var mainListValue = this.value;
  
  // 根据选择的选项值，决定是否隐藏下拉列表
  if (mainListValue === 'option1') {
    document.getElementById('hiddenList').style.display = 'none'; // 隐藏下拉列表
  } else {
    document.getElementById('hiddenList').style.display = 'block'; // 显示下拉列表
  }
});