如何在不同的列上构建两个selects？

<div class="row">
  <div class="column">
    <select id="select1">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </div>
  <div class="column">
    <select id="select2">
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6">Option 6</option>
    </select>
  </div>
</div>

.row {
  display: flex;
}

.column {
  flex: 50%;
}

// 获取select元素
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");

// 添加事件监听器，当select1的选项改变时，更新select2的选项
select1.addEventListener("change", function() {
  // 清空select2的选项
  select2.innerHTML = "";
  
  // 根据select1的选项值，动态生成select2的选项
  if (select1.value === "option1") {
    select2.add(new Option("Option 4", "option4"));
    select2.add(new Option("Option 5", "option5"));
  } else if (select1.value === "option2") {
    select2.add(new Option("Option 6", "option6"));
  } else if (select1.value === "option3") {
    select2.add(new Option("Option 7", "option7"));
    select2.add(new Option("Option 8", "option8"));
    select2.add(new Option("Option 9", "option9"));
  }
});