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

<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>

<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>

<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>