» » Use jQuery to achieve multi-condition filter

 

Use jQuery to achieve multi-condition filter

Author: bamboo06 on 29-12-2015, 01:24, views: 2239

4
When we buy goods business on platform in the Product List, we use filter queries based on brand, style, price range and other conditions, a condition when you click on the page displays user-selected set of conditions, and compliance with the corresponding conditions of commodity information displayed. Well, today we use jQuery to achieve this front-end results.


HTML
First, we classify the query conditions arranged conditions container li.select-list on the page and have chosen conditions container div.select-result.
<ul class="select">
	<li class="select-list">
		<dl id="select1">
			<dt>Type 1:</dt>
			<dd class="select-all selected"><a href="#">All</a></dd>
			<dd><a href="#">Type 1:A</a></dd>
			<dd><a href="#">Type 1:B</a></dd>
			<dd><a href="#">Type 1:C</a></dd>
			<dd><a href="#">Type 1:D</a></dd>
			<dd><a href="#">Type 1:E</a></dd>
			<dd><a href="#">Type 1:F</a></dd>
			<dd><a href="#">Type 1:G</a></dd>
		</dl>
	</li>
	<li class="select-list">
		<dl id="select2">
			<dt>Type 2:</dt>
			<dd class="select-all selected"><a href="#">All</a></dd>
			<dd><a href="#">Type 2:A</a></dd>
			<dd><a href="#">Type 2:B</a></dd>
			<dd><a href="#">Type 2:C</a></dd>
			<dd><a href="#">Type 2:D</a></dd>
			<dd><a href="#">Type 2:E</a></dd>
		</dl>
	</li>
	<li class="select-list">
		<dl id="select3">
			<dt>Type 3:</dt>
			<dd class="select-all selected"><a href="#">All</a></dd>
			<dd><a href="#">Type 3:A</a></dd>
			<dd><a href="#">Type 3:B</a></dd>
			<dd><a href="#">Type 3:C</a></dd>
			<dd><a href="#">Type 3:D</a></dd>
		</dl>
	</li>
	<li class="select-result">
		<dl>
			<dt>Selected:</dt>
			<dd class="select-no">No selection filters</dd>
		</dl>
	</li>
</ul>

After a good layout of the content, add css styles 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 users click on any condition, marking the currently selected state, neighboring conditions unchecked, and update the contents of the container has been selected conditions, see the code:
$(document).ready(function(){ 
    $("#select1 dd").click(function () { 
        $(this).addClass("selected").siblings().removeClass("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 applications, we want to combine back-end procedures, handsome election conditions, the page will change in response to the content, interested students can try.

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
27 August 2017 01:22

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Profit primarily prime quality items -- you can understand them all within: Kinky Sex Ideas

<
  • 0 Comments
  • 0 Articles
27 August 2017 06:40

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Interestingly you write, I will address you'll find exciting and interesting things on similar topics. Relationship ebook

<
  • 0 Comments
  • 0 Articles
27 August 2017 08:08

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
On my website you'll see similar texts, write what you think. Erythritol

<
  • 0 Comments
  • 0 Articles
14 December 2017 07:33

Árdghal

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Honestly, this is one of the best things you've shared with us on this site. Now that I know about this, my calender for my next year at the http://www.aussiessaywriting.com/ job will be perfect. I thank you for doing that for me.
My Webpage

Information
Comment on the news site is possible only within (days) days from the date of publication.