jquery select二级联动

基础概念

jQuery Select 二级联动是指使用 jQuery 实现两个下拉菜单（Select）之间的联动效果。通常情况下，第一个下拉菜单（一级菜单）的选择会影响第二个下拉菜单（二级菜单）的选项显示。这种联动效果常用于表单设计中，例如选择国家后自动显示对应的省份。

类型

静态联动：预先定义好所有可能的选项，通过 JavaScript 控制显示和隐藏。
动态联动：通过 AJAX 请求从服务器获取数据，并根据一级菜单的选择动态更新二级菜单的选项。

应用场景

表单设计：如选择国家、省份、城市等。
商品分类：如选择大类后显示对应的小类。
数据筛选：如选择日期范围后显示对应的数据。

示例代码

以下是一个简单的 jQuery Select 二级联动的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Select 二级联动</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="country">
        <option value="">请选择国家</option>
        <option value="china">中国</option>
        <option value="usa">美国</option>
    </select>
    <select id="province">
        <option value="">请选择省份</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#country').change(function() {
                var country = $(this).val();
                var provinces = {
                    'china': ['北京', '上海', '广东'],
                    'usa': ['加利福尼亚', '纽约', '德克萨斯']
                };

                var provinceSelect = $('#province');
                provinceSelect.empty();
                provinceSelect.append('<option value="">请选择省份</option>');

                $.each(provinces[country], function(index, province) {
                    provinceSelect.append('<option value="' + province + '">' + province + '</option>');
                });
            });
        });
    </script>
</body>
</html>