如何创建显示交错网格视图的下拉菜单？

<select id="dropdown">
  <option value="grid1">网格视图1</option>
  <option value="grid2">网格视图2</option>
  <option value="grid3">网格视图3</option>
</select>

<div id="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <div class="grid-item">项目4</div>
  <div class="grid-item">项目5</div>
  <div class="grid-item">项目6</div>
</div>

#grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}

const dropdown = document.getElementById('dropdown');
const gridContainer = document.getElementById('grid-container');

dropdown.addEventListener('change', function() {
  const selectedOption = dropdown.value;
  
  // 根据选项值更新网格视图
  if (selectedOption === 'grid1') {
    gridContainer.style.gridTemplateColumns = 'repeat(3, 1fr)';
    gridContainer.style.gridTemplateRows = 'repeat(2, 1fr)';
  } else if (selectedOption === 'grid2') {
    gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
    gridContainer.style.gridTemplateRows = 'repeat(3, 1fr)';
  } else if (selectedOption === 'grid3') {
    gridContainer.style.gridTemplateColumns = 'repeat(4, 1fr)';
    gridContainer.style.gridTemplateRows = 'repeat(2, 1fr)';
  }
});