如何在html中将2个下拉过滤器与bootstrap 4一起使用

在HTML中使用两个下拉过滤器与Bootstrap 4一起使用的方法如下：

首先，确保你已经引入了Bootstrap 4的CSS和JavaScript文件。你可以通过以下方式在HTML文件中引入它们：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

创建两个下拉列表的HTML结构。你可以使用<select>元素和<option>元素来创建下拉列表。例如，下面的代码创建了两个下拉列表，分别是"颜色"和"尺寸"：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <label for="color">颜色：</label>
      <select id="color" class="form-control">
        <option value="">请选择颜色</option>
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
        <option value="green">绿色</option>
      </select>
    </div>
    <div class="col-md-6">
      <label for="size">尺寸：</label>
      <select id="size" class="form-control">
        <option value="">请选择尺寸</option>
        <option value="small">小号</option>
        <option value="medium">中号</option>
        <option value="large">大号</option>
      </select>
    </div>
  </div>
</div>

使用JavaScript代码来实现下拉列表的过滤功能。你可以使用jQuery或纯JavaScript来实现。以下是一个使用jQuery的示例代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 当颜色下拉列表的值发生变化时
  $('#color').change(function() {
    var selectedColor = $(this).val(); // 获取选中的颜色值
    filterItems(selectedColor); // 调用过滤函数
  });

  // 当尺寸下拉列表的值发生变化时
  $('#size').change(function() {
    var selectedSize = $(this).val(); // 获取选中的尺寸值
    filterItems(selectedSize); // 调用过滤函数
  });

  // 过滤函数
  function filterItems(filter) {
    // 遍历所有选项
    $('option').each(function() {
      var item = $(this);
      var value = item.val();
      // 如果选项的值与过滤条件匹配，则显示该选项，否则隐藏
      if (value === filter || filter === '') {
        item.show();
      } else {
        item.hide();
      }
    });
  }
});
</script>

以上代码使用了jQuery库来监听下拉列表的值变化，并根据选中的值来过滤显示或隐藏选项。你可以根据自己的需求修改过滤逻辑。

这样，你就可以在HTML中使用两个下拉过滤器与Bootstrap 4一起使用了。记得根据实际情况修改下拉列表的选项和值，以及过滤逻辑。