如何在一个页面上使用这个多选下拉菜单两次，以便每个实例都输出到自己的数组中？

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

<select id="dropdown2" multiple>
  <option value="option4">选项4</option>
  <option value="option5">选项5</option>
  <option value="option6">选项6</option>
</select>

// 创建两个空数组用于存储选中的值
var selectedValues1 = [];
var selectedValues2 = [];

// 获取下拉菜单元素
var dropdown1 = document.getElementById("dropdown1");
var dropdown2 = document.getElementById("dropdown2");

// 监听下拉菜单的change事件
dropdown1.addEventListener("change", function() {
  // 清空数组
  selectedValues1 = [];
  
  // 遍历选中的选项，将值存储到数组中
  for (var i = 0; i < dropdown1.options.length; i++) {
    if (dropdown1.options[i].selected) {
      selectedValues1.push(dropdown1.options[i].value);
    }
  }
});

dropdown2.addEventListener("change", function() {
  // 清空数组
  selectedValues2 = [];
  
  // 遍历选中的选项，将值存储到数组中
  for (var i = 0; i < dropdown2.options.length; i++) {
    if (dropdown2.options[i].selected) {
      selectedValues2.push(dropdown2.options[i].value);
    }
  }
});

// 输出选中的值到控制台
console.log("选中的值1:", selectedValues1);
console.log("选中的值2:", selectedValues2);