GOOCODE - Find your code/scripts

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.