JQ实现多条件组合筛选

2981
<!-- 代码 开始 -->
<div id="filter">
        <dl>
            <dt>品牌:</dt>
            <dd><div><a data-value="全部">全部</a></div></dd>
            <dd><div><a data-value="惠普">惠普(hp)</a></div></dd>
            <dd><div><a data-value="联想">联想(Lenovo)</a></div></dd>
            <dd><div><a data-value="联想">联想(ThinkPad)</a></div></dd>
            <dd><div><a data-value="宏基">宏基(acer)</a></div></dd>
            <dd><div><a>华硕</a></div></dd>
            <dd><div><a>戴尔</a></div></dd>
            <dd><div><a>三星</a></div></dd>
            <dd><div><a>索尼</a></div></dd>
            <dd><div><a>东芝</a></div></dd>
            <dd><div><a>Gateway</a></div></dd>
            <dd><div><a>微星</a></div></dd>
            <dd><div><a>海尔</a></div></dd>
            <dd><div><a>清华同方</a></div></dd>
            <dd><div><a>富士通</a></div></dd>
            <dd><div><a>苹果(Apple)</a></div></dd>
            <dd><div><a>神舟</a></div></dd>
            <dd><div><a>方正</a></div></dd>
            <dd><div><a>优雅</a></div></dd>
        </dl>
        <dl>
            <dt>价格:</dt>
            <dd><div><a data-value="全部">全部</a></div></dd>
            <dd><div><a data-value="1000-2999">1000-2999</a></div></dd>
            <dd><div><a data-value="3000-3499">3000-3499</a></div></dd>
            <dd><div><a data-value="3500-3999">3500-3999</a></div></dd>
            <dd><div><a data-value="4000-4499">4000-4499</a></div></dd>
            <dd><div><a>4500-4999</a></div></dd>
            <dd><div><a>5000-5999</a></div></dd>
            <dd><div><a>6000-6999</a></div></dd>
            <dd><div><a>7000-9999</a></div></dd>
            <dd><div><a>10000以上</a></div></dd>
        </dl>
        <dl>
            <dt>尺寸:</dt>
            <dd><div><a data-value="全部">全部</a></div></dd>
            <dd><div><a data-value="8.9英寸及以下">8.9英寸及以下</a></div></dd>
            <dd><div><a data-value="11英寸">11英寸</a></div></dd>
            <dd><div><a data-value="12英寸">12英寸</a></div></dd>
            <dd><div><a data-value="13英寸">13英寸</a></div></dd>
            <dd><div><a>14英寸</a></div></dd>
            <dd><div><a>15英寸</a></div></dd>
            <dd><div><a>16英寸-17英寸</a></div></dd>
        </dl>
        <dl>
            <dt>平台:</dt>
            <dd><div><a data-value="全部">全部</a></div></dd>
            <dd><div><a data-value="AMD Brazos APU平台">AMD Brazos APU平台</a></div></dd>
            <dd><div><a data-value="Intel Sandy Bridge平台">Intel Sandy Bridge平台</a></div></dd>
            <dd><div><a data-value="Intel平台">Intel平台</a></div></dd>
            <dd><div><a data-value="AMD平台">AMD平台</a></div></dd>
        </dl>
        <dl>
            <dt>显卡:</dt>
            <dd><div><a data-value="全部">全部</a></div></dd>
            <dd><div><a data-value="独立显卡">独立显卡</a></div></dd>
            <dd><div><a data-value="集成显卡">集成显卡</a></div></dd>
            <dd><div><a data-value="核芯显卡">核芯显卡</a></div></dd>            
        </dl>
    </div>
    <div style="clear:both"></div>
<!-- 代码 结束 -->
JS:
<script type="text/javascript">
    $(function () {
        //选中filter下的所有a标签,为其添加hover方法,该方法有两个参数,分别是鼠标移上和移开所执行的函数。
        $("#filter a").hover(
            function () {
                $(this).addClass("seling");
            },
            function () {
                $(this).removeClass("seling");
            }
        );
        //选中filter下所有的dt标签,并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
        $("#filter dt+dd a").attr("class", "seled"); /*注意:这儿应该是设置(attr)样式,而不是添加样式(addClass),
                                                      不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/       
        //为filter下的所有a标签添加单击事件
        $("#filter a").click(function () {
            $(this).parents("dl").children("dd").each(function () {
$('a',this).removeClass("seled");
            });
            $(this).attr("class", "seled");
            results = RetSelecteds();
            resultdata = results.substring(0,results.length-1);
            //ajax
            $.ajax({
            url : xxx.php,
            type: "post",
            data:{data:resultdata},
            beforeSend: function () {
            $("#..").html('.正在请求中...');
            },
            success: function (data) {
            alert(data);
            }
            })
        });
    });
    function RetSelecteds() {
        var result = "";
        $("#filter a[class='seled']").each(function () {
            result += $(this).attr("data-value")+",";
        });
        return result;
    }
</script>