jQuery二级分类联动

关键词

jquery 二级分类联动

摘要

本文介绍一段jquery代码，可以实现二级分类的联动，很好用，在主流浏览器里面都测试过可用。

下面是源代码，请看：

<li class="list_item">
    <label class="label"><b>*</b>类别：</label>
    <select name="proBigClass" id="proBigClass" class="sel validate[required]">
        <option value="">请选择</option>
        <volist name="fsupplyclasslist" id="vo">
            <if condition="$vo.parentId eq 0">
           <option value="{$vo.id}">{$vo.fclassName}</option>
           </if>
       </volist>
    </select>   
    <select name="proClass" id="proClass" class="sel validate[required]">
        <option value="">请选择</option>
        <volist name="fsupplyclasslist" id="vo">
            <if condition="$vo.parentId neq 0">
           <option value="{$vo.id}" parentid="{$vo.parentId}" class="subop subop{$vo.parentId}">{$vo.fclassName}</option>
           </if>
       </volist>
    </select>
</li>

//产品分类
$(function(){
   $("#proBigClass").on('change', function(){
       var selectedValue = $(this).val();
       //remove wrap
       $("#proClass").children("span").each(function(){
           $(this).children().clone().replaceAll($(this));
       });
       //add wrap
       if(parseInt(selectedValue) != 0){
           $("#proClass").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
               $(this).wrap("<span style='display:none'></span>");
           });
       }
   });
});

说明：

1、静态代码段，是使用thinkphp开发的，所有大家会看到有用到volist标签来做循环，不要吃惊。
2、在列大分类的时候，是使用<if condition="$vo.parentId eq 0">条件来控制只显示顶级分类。
3、在生成二级分类时，多加了一个parentid标签，用于把所属父类记录下来，方便使用jquery来控制。
4、jquery代码段的原理是当顶级分类值改变时，获取顶级分类的值，并在子分类中查找parentid属性与顶级分类值不一致的option项，并把它的们用一个隐藏的span标签包起来。
5、当然，如果第二次更改顶级分类的值，则需要循环一下，把所有包裹的span标签全部去掉。

关于jQuery二级分类联动，本文就介绍到这里。