How to implement _jquery in jquery multi-condition filtering

This article illustrates the multiple conditional filtering effects of jquery. Share to everyone for your reference. Specifically as follows:
When we buy goods in the electric business platform, the product list page according to the brand, style, price range and other conditions to filter the query, when clicked on a certain condition, the page will display the user's choice of conditions set, and the corresponding conditions of the commodity information displayed. So today we use jquery to achieve this front-end effect.
Run Effect chart:

Html
First, we categorize the query criteria, arrange the condition container li.select-list and the selected condition container div.select-result in the page.

<ul class= "Select" > <li class= "select-list" > <dl id= "Select1" > <dt> jacket: ;/dt> <dd class= "Select-all selected" ><a href= "#" > All </a></dd> <dd>&lt A href= "#" > Knit shirt </a></dd> <dd><a href= "#" > Woolen jacket </a></dd> &LT;DD&G T;<a href= "#" >t </a></dd> <dd><a href= "#" > Down jacket </a></dd> <d D><a href= "#" > Cotton-padded </a></dd> <dd><a href= "#" > Sweater </a></dd> ;dd ><a href= "#" > Windbreaker </a></dd> </dl> </li> <li class= "Select-list"  
      ; &LT;DL id= "Select2" > <dt> trousers:</dt> <dd class= "Select-all selected" ><a href= "#" & GT </a></dd> <dd><a href= "#" > Jeans </a></dd> <dd><a href= " # > Feet/Pencil Pants &LT;/a></dd> <dd><a href= "#" > Slacks </a></dd> <dd><a href= "#" > Hit Underwear </a></dd> <dd><a href= "#" > Harlan pants </a></dd> </dl> &LT;/LI&G  
    T <li class= "Select-result" > <dl> <dt> selected conditions:</dt> <dd class= "select-no  
 "> Temporarily did not select filter conditions </dd> </dl> </li> </ul>

Decorate the content, add CSS style to the page content and load related JS.

<link rel= "stylesheet" type= "Text/css" href= "Css/style.css" > <script type= "text/javascript" src= "js/"  
Jquery.js "></script>  
<script type=" Text/javascript "src=" Js/script.js "></script>

Jquery
When the user clicks on any condition, the tag is currently selected, the adjacent condition is unchecked, and the contents of the selected condition container are updated, see Code:

$ (document). Ready (function () {$ ("#select1 DD"). Click (function () {$ (this). AddClass ("selected"). Siblings (). Remove 
    Class ("selected"); 
    if ($ (this). Hasclass ("Select-all")) {$ ("#selectA"). Remove (); 
      else {var Copythisa = $ (this). Clone (); 
      if ($ ("#selectA"). Length > 0) {$ ("#selectA a"). HTML ($ (this). text ()); 
      } else {$ (". Select-result DL"). Append (copythisa.attr ("id", "SelectA")); 
  } 
    } 
  }); 
    $ ("#select2 DD"). Click (function () {$ (this). AddClass ("selected"). Siblings (). Removeclass ("selected"); 
    if ($ (this). Hasclass ("Select-all")) {$ ("#selectB"). Remove (); 
      else {var COPYTHISB = $ (this). Clone (); 
      if ($ ("#selectB"). Length > 0) {$ ("#selectB a"). HTML ($ (this). text ()); 
      } else {$ (". Select-result DL"). Append (copythisb.attr ("id", "SELECTB")); 
  } 
    } 
  }); 
    $ ("#selectA"). Live ("Click", Function () {$ (this). Remove (); $ ("#select1. SeleCt-all "). AddClass (" selected "). Siblings (). Removeclass (" selected "); 
  }); 
    $ ("#selectB"). Live ("Click", Function () {$ (this). Remove (); 
  $ ("#select2. Select-all"). AddClass ("selected"). Siblings (). Removeclass ("selected"); 
  }); $ (". Select DD"). Live ("Click", Function () {if ($ (". Select-result dd"). Length > 1) {$ (". Select-no"). Hide 
    (); 
    } else {$ ('. Select-no '). Show (); 
} 
  });  
 });

In practical application, we should combine back-end program to achieve handsome selection conditions, page response content will also change, interested students can try.

The above is the entire content of this article, tell everyone JS how to achieve a multiple conditions screening function, I hope to help you learn.