jquery实现二级联动菜单

jQuery二级联动是一种常见的网页交互效果，它允许用户在选择一个选项时，另一个相关的选项列表会根据第一个选项的选择而更新，这种效果通常用于省市区选择、年级班级选择等场景，本文将详细介绍如何使用jQuery实现二级联动。

1、准备工作

在使用jQuery实现二级联动之前，我们需要准备两个HTML元素，一个作为一级菜单，另一个作为二级菜单，我们需要引入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="firstSelect">
        <option value="">请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
    </select>
    <select id="secondSelect">
        <option value="">请选择</option>
    </select>
</body>
</html>

2、编写jQuery代码

接下来，我们需要编写jQuery代码来实现二级联动，我们需要监听一级菜单的change事件，当用户选择一个选项时，根据选中的值更新二级菜单的选项，为了实现这个功能，我们可以使用jQuery的ajax方法从服务器获取数据，这里我们假设服务器返回的数据是一个包含省份和城市信息的JSON对象。

$(document).ready(function() {
    // 监听一级菜单的change事件
    $('#firstSelect').on('change', function() {
        var selectedValue = $(this).val(); // 获取选中的值
        if (selectedValue) {
            // 发送ajax请求，获取二级菜单的数据
            $.ajax({
                url: 'getCityData', // 服务器接口地址
                type: 'GET', // 请求类型
                data: { province: selectedValue }, // 请求参数
                dataType: 'json', // 返回数据类型
                success: function(data) { // 请求成功时的回调函数
                    var secondSelect = $('#secondSelect'); // 获取二级菜单元素
                    secondSelect.empty(); // 清空二级菜单的选项
                    // 根据返回的数据更新二级菜单的选项
                    $.each(data, function(index, item) {
                        secondSelect.append('<option value="' + item.cityId + '">' + item.cityName + '</option>');
                    });
                }
            });
        } else {
            // 如果一级菜单为空，清空二级菜单的选项
            $('#secondSelect').empty();
        }
    });
});

3、服务器端处理

为了实现上述jQuery代码中的getCityData接口，我们需要在服务器端编写相应的处理逻辑，这里我们使用PHP作为服务器端语言，并假设已经有一个包含省份和城市信息的数据库表province_city，以下是一个简单的PHP处理示例：

<?php
header('Content-Type: application/json'); // 设置响应数据类型为JSON
$serverName = "localhost"; // 数据库服务器地址
$username = "root"; // 数据库用户名
$password = "password"; // 数据库密码
$dbName = "test"; // 数据库名称
$conn = new mysqli($serverName, $username, $password, $dbName); // 创建数据库连接对象
if ($conn->connect_error) { // 判断是否连接成功
    die("连接失败：" . $conn->connect_error); // 如果连接失败，输出错误信息并结束脚本执行
}
$province = $_GET['province']; // 获取请求参数中的省份值
$sql = "SELECT * FROM province_city WHERE province='$province'"; // 编写SQL查询语句，根据省份查询城市信息
$result = $conn->query($sql); // 执行SQL查询语句，获取查询结果集
$data = array(); // 定义一个数组，用于存储查询结果
if ($result->num_rows > 0) { // 如果查询结果集不为空，遍历结果集并将城市信息添加到数组中
    while($row = $result->fetch_assoc()) {
        $data[] = array(
            'cityId' => $row['cityId'],
            'cityName' => $row['cityName']
        );
    }
} else { // 如果查询结果集为空，输出错误信息并结束脚本执行
    echo json_encode(array('error' => '没有找到对应的城市信息'));
    exit;
}
echo json_encode($data); // 将查询结果转换为JSON格式并输出，结束脚本执行
$conn->close(); // 关闭数据库连接对象
?>

4、测试二级联动效果

jquery实现二级联动菜单