jQuery仿淘宝商品多属性查询

首先我们在页面上放置三个筛选类和筛选结果.select-result：

<ul class="select" id="ul_select"> 
    <li class="select-list"> 
        <dl id="select1" class="dl"> 
            <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" class="dl"> 
            <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-list"> 
        <dl id="select3" class="dl"> 
            <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> 
        </dl> 
    </li> 
    <li class="select-result"> 
        <dl id="dl_result"> 
            <dt>已选条件：</dt> 
            <dd class="select-no">暂时没有选择过滤条件</dd> 
        </dl> 
    </li> 
</ul>

首先我们给每个属性分类绑定事件：

$("#ul_select").find(".dl").children("dd").click(function() { //每个商品分类行绑定点击事件 
    $(this).addClass("selected").siblings("dd").removeClass("selected"); //当前元素选中，其余删除选中样式 
    var index = $(this).parents(".select-list").index(); //获取父级索引index 
    var goods = $(this).children("a").text(); //获取当前商品名称 
    $("#select_" + index).remove(); //删除当前索引的筛选 
    if (goods != '全部') { //若不是全部 在筛选区域添加商品 
        $("#dl_result").append("<dd id='select_" + index + "' class='selected' onclick=removeChose($(this),'" + index + "')><a href='#'>" + goods + "</a></dd>"); 
    } 
    getResult(); 
})

然后我们看下里面的removeChose(obj,index)方法，第一个参数是当前对象，第二个参数是当前要删除的分类索引：

function removeChose(obj, index) { //删除筛选 
    $("#ul_select").children(".select-list").eq(index).find(".selected").removeClass("selected"); //删除商品选中样式 
    $("#ul_select").children(".select-list").find("dd").eq(0).addClass("selected"); //给全部添加选中样式 
    obj.remove(); //当前按钮删除 
    getResult(); 
}

再看下getResult()筛选后的结果函数：

function getResult() { //结果处理 
    var len_chose = $("#dl_result").children(".selected").length; 
    if (len_chose > 0) { //若是筛选区域选中项大于0 
        $(".select-no").hide(); //暂时没有选择过滤条件 隐藏 
    } else { 
        $(".select-no").show(); //暂时没有选择过滤条件 显示 
    } 
}

商品多属性查询演示：http://www.sucaihuo.com/js/126.html