jquery 选择城市

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 选择器允许开发者通过各种方式查找和操作 DOM 元素。

类型

jQuery 选择器主要分为以下几类：

基本选择器：#id、.class、element、*
层级选择器：parent > child、ancestor descendant、prev + next、prev ~ siblings
过滤选择器：:first、:last、:even、:odd、:eq(index) 等
属性选择器：[attribute]、[attribute=value]、[attribute!=value] 等
表单选择器：:input、:text、:password、:radio、:checkbox 等

应用场景

假设我们要实现一个选择城市的功能，可以使用 jQuery 来简化 DOM 操作和事件处理。以下是一个简单的示例：

HTML

<!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>
</head>
<body>
    <select id="province">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>
    <select id="city" disabled>
        <option value="">请选择城市</option>
    </select>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

$(document).ready(function() {
    $('#province').change(function() {
        var province = $(this).val();
        var cities = {
            'beijing': ['东城区', '西城区', '朝阳区'],
            'shanghai': ['黄浦区', '徐汇区', '长宁区'],
            'guangzhou': ['天河区', '越秀区', '海珠区']
        };

        var citySelect = $('#city');
        citySelect.empty();
        citySelect.append('<option value="">请选择城市</option>');

        if (province) {
            $.each(cities[province], function(index, city) {
                citySelect.append('<option value="' + city + '">' + city + '</option>');
            });
            citySelect.prop('disabled', false);
        } else {
            citySelect.prop('disabled', true);
        }
    });
});

遇到的问题及解决方法

问题：选择城市时，城市列表没有更新

原因：可能是 jQuery 选择器没有正确绑定到事件，或者事件处理函数中的逻辑有误。

解决方法：

确保 jQuery 库已正确加载。
确保事件绑定代码在 DOM 完全加载后执行，可以使用 $(document).ready()。
检查事件处理函数中的逻辑，确保正确更新城市列表。

$(document).ready(function() {
    $('#province').change(function() {
        var province = $(this).val();
        var cities = {
            'beijing': ['东城区', '西城区', '朝阳区'],
            'shanghai': ['黄浦区', '徐汇区', '长宁区'],
            'guangzhou': ['天河区', '越秀区', '海珠区']
        };

        var citySelect = $('#city');
        citySelect.empty();
        citySelect.append('<option value="">请选择城市</option>');

        if (province) {
            $.each(cities[province], function(index, city) {
                citySelect.append('<option value="' + city + '">' + city + '</option>');
            });
            citySelect.prop('disabled', false);
        } else {
            citySelect.prop('disabled', true);
        }
    });
});

通过以上步骤，可以确保选择城市功能正常工作。