如何使用javascript更改基于选项卡选择的下拉列表

<div class="tabs">
  <button class="tab-button" data-tab="list1">选项卡1</button>
  <button class="tab-button" data-tab="list2">选项卡2</button>
  <button class="tab-button" data-tab="list3">选项卡3</button>
</div>

<select id="list1">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="list2">
  <option value="4">选项4</option>
  <option value="5">选项5</option>
  <option value="6">选项6</option>
</select>

<select id="list3">
  <option value="7">选项7</option>
  <option value="8">选项8</option>
  <option value="9">选项9</option>
</select>

// 获取选项卡按钮和下拉列表的元素
const tabButtons = document.querySelectorAll('.tab-button');
const dropdownLists = document.querySelectorAll('select');

// 为选项卡按钮添加点击事件处理程序
tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    const tab = button.dataset.tab;
    
    // 隐藏所有下拉列表
    dropdownLists.forEach(list => {
      list.style.display = 'none';
    });
    
    // 显示对应的下拉列表
    const dropdownList = document.getElementById(tab);
    dropdownList.style.display = 'block';
  });
});