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>&nbsp;&nbsp;&nbsp;

    <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二级分类联动，本文就介绍到这里。