二级下拉jquery

基础概念

二级下拉菜单是一种常见的用户界面元素，它允许用户从一个主分类中选择一个项目，然后根据这个选择显示相关的子分类。这种设计可以有效地组织和展示层次结构数据，提高用户体验。

类型

静态二级下拉菜单：预先定义好的下拉菜单，内容不会根据用户的操作而改变。
动态二级下拉菜单：根据用户的选择或其他条件动态生成子菜单内容。

应用场景

电子商务网站：用于展示产品分类和子分类。
在线教育平台：用于展示课程分类和子课程。
企业内部系统：用于组织和管理复杂的菜单结构。

示例代码

以下是一个使用jQuery实现动态二级下拉菜单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级下拉菜单</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <select id="mainCategory">
        <option value="">请选择主分类</option>
        <option value="category1">分类1</option>
        <option value="category2">分类2</option>
    </select>
    <select id="subCategory" class="hidden">
        <option value="">请选择子分类</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#mainCategory').change(function() {
                var selectedCategory = $(this).val();
                if (selectedCategory === '') {
                    $('#subCategory').addClass('hidden').html('<option value="">请选择子分类</option>');
                } else {
                    var subCategories = getSubCategories(selectedCategory);
                    var options = '<option value="">请选择子分类</option>';
                    $.each(subCategories, function(index, subCategory) {
                        options += '<option value="' + subCategory + '">' + subCategory + '</option>';
                    });
                    $('#subCategory').removeClass('hidden').html(options);
                }
            });

            function getSubCategories(category) {
                var subCategories = {
                    'category1': ['子分类1-1', '子分类1-2'],
                    'category2': ['子分类2-1', '子分类2-2']
                };
                return subCategories[category] || [];
            }
        });
    </script>
</body>
</html>