如何使用 jQuery 联动两个下拉框并动态加载对应数据-php教程-PHP中文网

如何使用 jQuery 联动两个下拉框并动态加载对应数据

本文讲解如何通过 jQuery 监听两个元素的变化，将它们的选中值（如地区与时间格式）组合为参数，异步请求 PHP 后端接口，并实时更新页面内容，无需刷新。

本文讲解如何通过 jquery 监听两个 `

在实际 Web 开发中，常需根据多个用户选择（如“地区”+“时间格式”）动态获取并渲染数据。本教程以“实时显示欧洲主要城市时间”为例，演示如何用 jQuery 实现双下拉联动、无刷新更新 DOM。

✅ 核心思路：统一监听 + 合并参数

不再为每个 <select></select> 单独绑定 change 事件，而是共用一个事件处理器，监听两个下拉框的任意变化，并在每次触发时读取两者当前值，构造完整的请求参数对象：

$(document).ready(function() {
  // 同时监听两个 select 的 change 事件
  $("#select-opt, #select-opt2").change(function() {
    // 分别获取 region 和 timeformat 的当前选中值（注意：需确保 option value 符合后端预期）
    var region = $("#select-opt").val() || "";
    var timeformat = $("#select-opt2").val() || "";

    $.ajax({
      type: 'GET',
      url: 'time.php',
      data: { region: region, timeformat: timeformat }, // 关键：以对象形式传参，自动序列化为 query string
      dataType: 'json',
      cache: false,
      success: function(result) {
        // 安全地更新 DOM（建议增加 result 判空）
        if (result && typeof result === 'object') {
          $('#Jax').html(result['Berlin'] || '—');
          $('#Jax2').html(result['Paris'] || '—');
          $('#Jax3').html(result['London'] || '—');
        }
      },
      error: function(xhr, status, err) {
        console.warn('请求失败:', status, err);
        $('#Jax, #Jax2, #Jax3').text('加载失败');
      }
    });
  });
});

⚠️ 注意事项与优化建议

HTML 中 value 值需规范：确保 <option></option> 的 value 是纯参数值（如 europe、12hours），而非带等号的字符串（如 region=europe）。否则 PHP 端 $_GET['region'] 将无法正确解析。推荐修改 HTML 如下：

<select id="select-opt"><option value="">Select one</option>
<option value="europe">Europe</option>
<option value="asia">Asia</option>
<option value="africa">Africa</option></select><select id="select-opt2"><option value="">Select one</option>
<option value="12hours">12 Hours Format</option>
<option value="24hours">24 Hours Format</option></select>

PHP 端健壮性增强：当前 time.php 未处理 region=asia 或 region=africa 等分支，也缺少默认/错误兜底逻辑。建议补充：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

<?php header('Content-Type: application/json; charset=utf-8');
$region = $_GET['region'] ?? '';
$timeformat = $_GET['timeformat'] ?? '24hours';

$array = [];
if ($region === 'europe') {
    if ($timeformat === '12hours') {
        $array = ["Berlin" => "03:30 PM", "Paris" => "02:30 PM", "London" => "04:30 PM"];
    } else {
        $array = ["Berlin" => "15:30", "Paris" => "14:30", "London" => "16:30"];
    }
} else {
    $array = ["Berlin" => "—", "Paris" => "—", "London" => "—"]; // 默认占位
}

echo json_encode($array);
?>