如何使用ag grid显示和隐藏基于两个下拉选择的列

const columnDefs = [
  { headerName: '姓名', field: 'name' },
  { headerName: '年龄', field: 'age' },
  { headerName: '性别', field: 'gender' },
  // 其他列定义...
];

const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  // 其他配置选项...
};

new agGrid.Grid(gridDiv, gridOptions);

<select id="select1">
  <option value="name">姓名</option>
  <option value="age">年龄</option>
  <option value="gender">性别</option>
  <!-- 其他选项... -->
</select>

<select id="select2">
  <option value="name">姓名</option>
  <option value="age">年龄</option>
  <option value="gender">性别</option>
  <!-- 其他选项... -->
</select>

const select1 = document.getElementById('select1');
const select2 = document.getElementById('select2');

select1.addEventListener('change', handleSelectChange);
select2.addEventListener('change', handleSelectChange);

function handleSelectChange() {
  const selectedColumn1 = select1.value;
  const selectedColumn2 = select2.value;

  // 根据选择的列，显示或隐藏相应的列
  gridOptions.columnApi.setColumnVisible(selectedColumn1, true);
  gridOptions.columnApi.setColumnVisible(selectedColumn2, false);
}