jquery二级联动

最新推荐文章于 2023-07-25 20:38:09 发布

蒸蒸日上y

最新推荐文章于 2023-07-25 20:38:09 发布

阅读量3.3w

点赞数 2

分类专栏：代码笔记文章标签：二级联动 jquery

本文链接：https://blog.csdn.net/zrainload/article/details/97396668

版权

代码笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

该博客主要介绍如何利用jQuery实现商品分类中的二级联动效果，通过获取商品的顶级ID来动态加载并展示对应的二级分类。文章包含HTML和JS代码示例。

摘要由CSDN通过智能技术生成

根据商品顶级ID查询二级分类

html代码:

<p class="classify">
    <span>商品分类</span>
    <select name="sel1" id="select1">
        <option value="0">请选择一级分类</option>
        <option value="1">家常海鲜</option>
        <option value="2">鱼</option>
    </select>
    <select name="sel2" id="select2">
        <option value="0">请选择子分类</option>
    </select>
</p>

js代码:

//商品分类二级分类
    $('#select1').change(function(){
        var class_id = $(this).val();
        $.ajax({
            type: "POST",
            url: "https://www.xxxxxx.com/admin/login/twoClass",
            data: {class_id:class_id},
            dataType: 'json',
            crossDomain: true,
            success:function(result){
                result = eval(result);
                str = '';
                for(var i=0;i<result.length;i++){
                    str += "<option value="+result[i]['class_two_id']+">"+result[i]['two_class_name']+"</option>";
                }
                $('#select2').append(str);
            }
        })
    });