jquery商品列表多条件筛选效果代码-html代码-BFW代码库

jquery商品列表多条件筛选效果代码

代码语言：html

代码描述：jquery商品列表多条件筛选效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a,img {
            border: 0;
        }
        body {
            font: 12px/180% "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;;background: #fff
        }
        /* select */
        .select {
            padding: 5px 10px;
            border: #ddd 1px solid;
            border-radius: 4px;
            width: 60%;
            margin: 5% auto;
            font-size: 12px
        }
        .select li {
            list-style: none;
            padding: 10px 0 5px 100px
        }
        .select .select-list {
            border-bottom: #eee 1px dashed
        }
        .select dl {
            zoom: 1;
            position: relative;
            line-height: 24px;
        }
        .select dl:after {
            content: " ";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden
        }
        .select dt {
            width: 100px;
            margin-bottom: 5px;
            position: absolute;
            top: 0;
            left: -100px;
            text-align: right;
            color: #666;
            height: 24px;
            line-height: 24px
        }
        .select dd {
            float: left;
            display: inline;
            margin: 0 0 5px 5px;
        }
        .select a {
            display: inline-block;
            white-space: nowrap;
            height: 24px;
            padding: 0 10px;
            text-decoration: none;
            color: #039;
            border-radius: 2px;
        }
        .select a:hover {
            color: #f60;
            background-color: #f3edc2
        }
        .select .selected a {
            color: #fff;
            background-color: #f60
        }
        .select-result dt {
            font-weight: bold
        }
        .select-no {
            color: #999
        }
        .select .select-result a {
            padding-right: 20px;
            background: #f60 url("//repo.bfw.wiki/bfwrepo/image/6077e7cf77c69.png") right 9px no-repeat
        }
        .select .select-result a:hover {
            background-position: right -15px
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript">
        $(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"));
                    }
                }
            });

            $("#select3 dd").click(function () {
                $(this).addClass("selected").siblings().removeClass("selected");
            .........完整代码请登录后点击上方下载按钮下载查看