jquery下拉列表联动

基础概念

jQuery下拉列表联动是指通过使用jQuery库来实现两个或多个下拉列表（<select>元素）之间的交互。当一个下拉列表的选项改变时，另一个下拉列表的选项会根据前者的选择进行更新。这种交互通常用于实现级联选择，例如在选择国家后自动更新城市列表。

优势

简化DOM操作：jQuery简化了DOM操作，使得代码更加简洁和易读。
事件处理：jQuery提供了强大的事件处理机制，可以轻松处理下拉列表的change事件。
跨浏览器兼容性：jQuery处理了大部分浏览器的兼容性问题，使得代码在不同浏览器中都能正常工作。

类型

静态联动：预先定义好所有可能的选项组合，根据选择动态显示。
动态联动：通过AJAX请求从服务器获取数据，根据前一个下拉列表的选择动态更新后一个下拉列表的选项。

应用场景

地区选择：选择国家后自动更新城市列表。
分类选择：选择大类后自动更新子类列表。
产品筛选：选择某个属性后自动更新其他相关属性的选项。

示例代码

以下是一个简单的静态联动的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="city">
        <option value="">请选择城市</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#country').change(function() {
                var country = $(this).val();
                if (country === 'china') {
                    $('#city').html('<option value="">请选择城市</option><option value="beijing">北京</option><option value="shanghai">上海</option>');
                } else if (country === 'usa') {
                    $('#city').html('<option value="">请选择城市</option><option value="newyork">纽约</option><option value="losangeles">洛杉矶</option>');
                } else {
                    $('#city').html('<option value="">请选择城市</option>');
                }
            });
        });
    </script>
</body>
</html>