商品筛选条件效果实现

写一个如上述的搜索功能,条件比较多,自己就写了上demo

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
.on{ color:#F00; display:block; background:yellow;}

</style>
<div id="seach">
<ul id="a">
<li><a href="javascript:" where="a1">a-1</a></li>
<li><a href="javascript:" where="a2">a-2</a></li>
<li><a href="javascript:" where="a3">a-3</a></li>
</ul>

<ul id="b">
<li><a href="javascript:" where="b1">b-1</a></li>
<li><a href="javascript:" where="b2">b-2</a></li>
<li><a href="javascript:" where="a3">b-3</a></li>
</ul>

<ul id="c">
<li><a href="javascript:" where="c1">c-1</a></li>
<li><a href="javascript:" where="c2">c-2</a></li>
<li><a href="javascript:" where="c3">c-3</a></li>
</ul>
</div>
<p id="show"></p>
<script type="text/javascript">
$(function(){
    selectByGroup('#seach ul li', 'on')
    
    $('#seach ul li').click(function(){
        data = getCheckVal('#seach','on');
        $.post('test.php',data,function(data){
            $('#show').text(data);    
        });
        
    });
    

});

function selectByGroup(seler, onCss){
    $(seler).click(function(){
        var sibling = $(this).siblings('.'+onCss);
        //如果当前存在被选中的同级元素
        if(sibling.length > 0){
            sibling.removeClass(onCss);
        }
        $(this).addClass(onCss);
    });    
}

function getCheckVal(seler, onCss){
    var obj = $(seler+' .'+onCss);
    if(obj.length > 0){
         var json = '{';
         $(obj).each(function(){
             var name = $(this).parent('ul').attr('id');
             var value = $(this).find('a').attr('where');
               json +=  name+':"'+value+'",';
         });
         json = json.substr(0, json.length-1);
         json += '}';
        return eval('(' + json + ')');
    }
}


</script>      

在 test.php 中,就一句: print_r($_POST);