如何创建具有多个过滤器的搜索栏？

<form>
  <input type="text" id="searchInput" placeholder="搜索...">
  <select id="filter1">
    <option value="">选择过滤器1</option>
    <option value="filter1_option1">过滤器1选项1</option>
    <option value="filter1_option2">过滤器1选项2</option>
    <!-- 添加更多过滤器1的选项 -->
  </select>
  <select id="filter2">
    <option value="">选择过滤器2</option>
    <option value="filter2_option1">过滤器2选项1</option>
    <option value="filter2_option2">过滤器2选项2</option>
    <!-- 添加更多过滤器2的选项 -->
  </select>
  <!-- 添加更多过滤器 -->
  <button type="submit">搜索</button>
</form>

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var searchInputValue = document.getElementById('searchInput').value;
  var filter1Value = document.getElementById('filter1').value;
  var filter2Value = document.getElementById('filter2').value;
  // 获取更多过滤器的值

  // 执行搜索和过滤操作
  // 根据searchInputValue、filter1Value、filter2Value等值进行相应的处理
});