如何使用javascript在html中选择第一个选择框后打开第二个选择框的列表？

<select id="select1" onchange="showSelect2()">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<select id="select2" style="display:none;">
  <option value="">请选择</option>
  <option value="suboption1">子选项1</option>
  <option value="suboption2">子选项2</option>
  <option value="suboption3">子选项3</option>
</select>

function showSelect2() {
  var select1 = document.getElementById("select1");
  var select2 = document.getElementById("select2");

  if (select1.value !== "") {
    select2.style.display = "block";
  } else {
    select2.style.display = "none";
  }
}

<style>
  #select2 {
    display: none;
  }
</style>