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

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文来源于互联网,如果文章侵犯了您的权宜,请与我们“splaybow(@)qq.com”联系,谢谢合作!

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« jQuery添加class、删除class jQuery获取元素的属性attr、值value、text和html »