JavaScript：如何创建可以过滤数据的下拉按钮？

Question

我是一名前端开发人员，非常不擅长 JavaScript 编码，所以，你们中的任何人都可以帮我创建两个相互依赖的过滤按钮吗？这些按钮还应该能够过滤数据。

我找到了一个参考，但它是在 jquery 中。如果你能帮我将其转换为 javasript，那就太好了。这是[https://codepen.io/nrwilliams/pen/LNrgBy]

请帮忙:"((谢谢!!!

Answer 1

您可以搜索任何在线 Jquery 到 vanilla Javascript 转换器，例如 Proper Programming's

所以这就是提到的 Jquery 代码到普通的 Javascript 中

document.querySelector("select").change(function () {
  document.querySelector(".filter").hide();
});

document.querySelector(".filter-btn").click(function () {
  var type = document.querySelector(".filter-type option:selected").val();
  var brand = document.querySelector(".filter-brand option:selected").val();

  if (document.querySelector(".filter").hasClass(brand) && document.querySelector(".filter").hasClass(type)) {
    document.querySelector("." + brand + "" + "." + type).show();
  } else {
    document.querySelector("." + brand + "" + "." + type).hide();
  }
});

逻辑是监听

select

元素并在其上放置

onChange

处理程序以捕获所选值，当该值在您手中时，您可以操纵其他选择的选项。