模拟多条件筛选

css部分：

<style>
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif, "ÐÂËÎÌå";}
    /* 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("close.gif") right 9px no-repeat}
    .select .select-result a:hover{background-position:right -15px}
</style>

html部分：

<ul class="select">
    <li class="select-list">
        <dl id="select1">
            <dt>分类：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">针织衫</a></dd>
            <dd><a href="#">毛呢外套</a></dd>
            <dd><a href="#">T恤</a></dd>
            <dd><a href="#">羽绒服</a></dd>
            <dd><a href="#">棉衣</a></dd>
            <dd><a href="#">卫衣</a></dd>
            <dd><a href="#">风衣</a></dd>
        </dl>
    </li>
    <li class="select-list">
        <dl id="select2">
            <dt>关键字：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">牛仔裤</a></dd>
            <dd><a href="#">小脚/铅笔裤</a></dd>
            <dd><a href="#">休闲裤</a></dd>
            <dd><a href="#">打底裤</a></dd>
            <dd><a href="#">哈伦裤</a></dd>
        </dl>
    </li>
    <li class="select-result">
        <dl>
            <dt>已选条件：</dt>
            <dd class="select-no">暂时没有选择过滤条件</dd>
        </dl>
    </li>
</ul>

 

js部分：（此处需要引入jquery.js）

<script>
    $(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();
            }
        });

    });
</script>