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:115085382!
了解更多好文章,请关注我们的新浪微博和腾讯微博
亲,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


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

相关文章:

用户体验!UI设计的30条黄金准则  (2016/12/14 7:56:23)

HTML5(H5)表单验证  (2016/12/9 7:32:10)

百度提供了Bootstrap Glyphicons的CDN  (2016/7/12 18:05:41)

Windows7、Windows8、Windows10默认带的IE版本  (2016/6/5 7:18:19)

微信二维码鼠标放上去变大的前端代码  (2016/9/11 7:25:43)

jQuery validationEngine校验表单格式  (2016/8/21 7:53:26)

jQuery操作select控件的用法总结  (2016/7/21 7:26:24)

jquery的load函数介绍  (2016/12/1 7:44:37)

CSS中大于号(>)的作用  (2016/10/1 7:39:31)

jquery的get()方法  (2015/11/28 13:58:08)