JQ实现仿淘宝条件筛选

首先看下效果：

Js代码：

<script type="text/javascript">

            $(".search_qxxx > ul > li > a").click(function () {

                if ($(this).attr("class") != "text_ce5a11") {

                    if (typeof ($("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).html()) != 'undefined') {  // 当前分类已选条件， 覆盖已有内容

                        if ($(this).parent().siblings("li").andSelf().find("a").first()[].innerHTML == $(this).parent().siblings("li").andSelf().find("a").first().context.innerHTML) {

                            //  如果选择的是不限，则应该把下面的该类型中的条件删除。

                            $("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).detach();

                            $(this).addClass("text_ce5a11").parent().siblings("li").find("a").removeClass("text_ce5a11");

                        }

                        $("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).html("" + $(this).html() + "&nbsp;<a href='javascript:void(0);'>×</a>").attr("id", $(this).attr("id"));

                    }

                    else {

                        if ($("#soKeyWords .option").size() == ) {

                            $("#soKeyWords").html("<span class='option' id='" + $(this).attr("id") + "'>" + $(this).html() + "&nbsp;<a href='javascript:void(0);'>×</a></span>");

                        }

                        else {

                            $("#soKeyWords").append("<span class='option' id='" + $(this).attr("id") + "'>" + $(this).html() + "&nbsp;<a href='javascript:void(0);'>×</a></span>");

                        }

                    }

                    $(this).addClass("text_ce5a11").parent().siblings("li").find("a").removeClass("text_ce5a11");

                    return false;

                }

                return false;

            });

            $("#soKeyWords > span > a").live("click", function () {

                $(this).parent().detach();

                $(".search_qxxx > ul > li").find("#" + $(this).parent().attr("id")).removeClass("text_ce5a11").parent().siblings("li").andSelf().find("a").first().addClass("text_ce5a11");

            });

        </script>

预览：http://guolingfa.cn/searchdemo/index.html