How to write filter box in jquery

JQuery is a powerful Javascript library that can easily operate HTML documents, making document operation and event processing easier. In this article, we will learn how to use JQuery to create filter boxes, which will be a very practical skill. Before starting, you should have some basic knowledge of JQuery.

1. Create HTML structure

First, we need to create a container containing the filter box in HTML. You can use the following code to create a simple HTML structure that contains a select element and a list of child elements containing options:

<div>
  <select>
    <option>所有</option>
    <option>红色</option>
    <option>蓝色</option>
    <option>绿色</option>
  </select>
  <ul>
    <li>红色物品</li>
    <li>蓝色物品</li>
    <li>绿色物品</li>
  </ul>
</div>

In the above code, we create a container with the id "filter-container" container. There is a select element with the id "filter-select" in the container, which is used to select filter conditions. Below is an unordered list with the id "filter-list", which contains some items that will be filtered.

2. Writing a filter function

Next, we need to write a filter function, which is responsible for showing or hiding the elements used for filtering based on the selected filter conditions. This functionality can be achieved using the following code:

function filter() {
  var selected = $("#filter-select").val(); // 获取选择的筛选条件
  if(selected == "") { // 如果没有选择
    $("#filter-list li").show(); // 显示所有元素
  } else { // 如果选择了条件
    $("#filter-list li").hide(); // 隐藏所有元素
    $("." + selected).show(); // 显示与条件匹配的元素
  }
}

In the above code, we have defined a function called filter. This function will get the selected filter criteria and show or hide elements based on the selected criteria. First, we use a JQuery selector to get the value of the filter condition and store it in the selected variable. Next, we use an if statement to check if the condition is selected. If there is no selection, all elements will be displayed using JQuery's show method. If a condition is selected, use the hide method to hide all elements, use a filter to filter elements that match the filter condition, and use the show method to display these elements.

3. Responding to user interaction

Now, we need to associate the filter function with user interaction. The filter function can be associated with the change event in the select element using the following code:

$("#filter-select").change(filter); // 注册change事件并调用filter函数

In the above code, we select the filter select element using JQuery selector and call the change method to associate it with the element named The filter function is associated. Whenever the user changes the filter criteria, the filter function will be called.

4. Full Code

Here is the complete code example for creating and rendering a list of elements with a filter box:

nbsp;html>


  <meta>
  <title>JQuery筛选框</title>
  <script></script>
  <script>
    function filter() {
      var selected = $("#filter-select").val(); // 获取选择的筛选条件
      if(selected == "") { // 如果没有选择
        $("#filter-list li").show(); // 显示所有元素
      } else { // 如果选择了条件
        $("#filter-list li").hide(); // 隐藏所有元素
        $("." + selected).show(); // 显示与条件匹配的元素
      }
    }
    
    $(function() {
      $("#filter-select").change(filter); // 注册change事件并调用filter函数
    });
  </script>


  <div>
    <select>
      <option>所有</option>
      <option>红色</option>
      <option>蓝色</option>
      <option>绿色</option>
    </select>
    <ul>
      <li>红色物品</li>
      <li>蓝色物品</li>
      <li>绿色物品</li>
    </ul>
  </div>

That’s how Tutorial on using JQuery to create a filter box, I hope it can help you!

The above is the detailed content of How to write filter box in jquery. For more information, please follow other related articles on the PHP Chinese website!