jquery 三级联动菜单

基础概念

jQuery三级联动菜单是一种基于jQuery库实现的多级下拉菜单。它通常用于表单中，允许用户从多个层级中选择一个选项。例如，可以选择国家、省份和城市。

优势

简化DOM操作：jQuery简化了DOM操作，使得创建和操作三级联动菜单变得更加容易。
事件处理：jQuery的事件处理机制使得处理下拉菜单的交互变得更加简单。
兼容性：jQuery具有良好的浏览器兼容性，可以在大多数现代浏览器中正常工作。

类型

静态三级联动菜单：预先定义好所有选项，用户选择时直接显示。
动态三级联动菜单：根据用户的选择动态加载下一级选项，通常需要后端支持。

应用场景

三级联动菜单常用于以下场景：

地区选择：国家、省份、城市。
时间选择：年、月、日。
分类选择：大类、子类、细分类。

示例代码

以下是一个简单的静态三级联动菜单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery三级联动菜单</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" disabled>
        <option value="">请选择省份</option>
    </select>
    <select id="city" disabled>
        <option value="">请选择城市</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#country').change(function() {
                var country = $(this).val();
                if (country === 'china') {
                    $('#province').prop('disabled', false);
                    $('#province').html('<option value="">请选择省份</option><option value="beijing">北京</option><option value="shanghai">上海</option>');
                } else if (country === 'usa') {
                    $('#province').prop('disabled', false);
                    $('#province').html('<option value="">请选择省份</option><option value="california">加利福尼亚</option><option value="newyork">纽约</option>');
                } else {
                    $('#province').prop('disabled', true);
                    $('#city').prop('disabled', true);
                }
            });

            $('#province').change(function() {
                var province = $(this).val();
                if (province === 'beijing') {
                    $('#city').prop('disabled', false);
                    $('#city').html('<option value="">请选择城市</option><option value="beijing">北京</option>');
                } else if (province === 'shanghai') {
                    $('#city').prop('disabled', false);
                    $('#city').html('<option value="">请选择城市</option><option value="shanghai">上海</option>');
                } else if (province === 'california') {
                    $('#city').prop('disabled', false);
                    $('#city':>html('<option value="">请选择城市</option><option value="losangeles">洛杉矶</option><option value="sanfrancisco">旧金山</option>');
                } else if (province === 'newyork') {
                    $('#city').prop('disabled', false);
                    $('#city').html('<option value="">请选择城市</option><option value="newyork">纽约</option>');
                } else {
                    $('#city').prop('disabled', true);
                }
            });
        });
    </script>
</body>
</html>