如何实现多下拉框联动并持久化显示多个选中值（PHP+AJAX 教程）-html教程-PHP中文网

如何实现多下拉框联动并持久化显示多个选中值（PHP+AJAX 教程）

本文详解如何解决两个独立下拉框（机型与飞行员座位）提交时互相覆盖的问题，通过 ajax 动态加载数据，避免页面刷新导致的状态丢失，确保基本重量与座位重量可同时、稳定显示。

本文详解如何解决两个独立下拉框（机型与飞行员座位）提交时互相覆盖的问题，通过 ajax 动态加载数据，避免页面刷新导致的状态丢失，确保基本重量与座位重量可同时、稳定显示。

在 Web 表单开发中，当多个

✅ 推荐方案：AJAX 异步加载（轻量可靠）

我们摒弃双表单重复提交，改用单页动态更新：

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

页面初始化时加载所有机型与座位选项；
用户选择任一下拉框时，通过 JavaScript 捕获变化，调用 PHP 后端接口获取对应数据；
使用 DOM 操作实时填充对应区域，不刷新页面，不丢失已有选择。

? 步骤 1：重构 HTML 结构（移除冗余表单，统一控制）

<!-- 移除两个独立 form，改为纯 select + data 属性 -->
<div class="aircraft-details-container">
  <div class="aircraft-details-header">Aircraft Details</div>
  <table class="aircraft-details-table">
<!-- ... 表头保持不变 ... --><tbody><tr>
<td><input class="aircraft-details-date" type="date" name="selectedDate"></td>
        <td>
          <select id="aircraftType" class="aircraft-select"><option value="">— Select Aircraft —</option>
<?php include 'db.php';
              $sql = "SELECT aircraftID, basicWeight, CGArm, lat FROM aircraft";
              $result = $conn->query($sql);
              while ($row = $result->fetch_assoc()) {
                echo "<option value="{$row[" aircraftid>{$row['aircraftID']}</option>";
              }
              $conn->close();
            ?>
          </select>
</td>
        <td id="basicWeightDisplay">—</td>
        <td id="CGArmDisplay">—</td>
        <td id="latDisplay">—</td>
      </tr></tbody>
</table>
</div>

<div class="passenger-details-container">
  <div class="passenger-details-header">Passenger Details</div>
  <table class="passenger-details-table">
<!-- ... 表头保持不变 ... --><tbody>
<!-- Basic Weight Row --><tr>
<td>Basic Weight</td>
        <td id="basicWeightValue">—</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>N/A</td>
        <td id="CGArmValue">—</td>
        <td id="basicMomentLong">—</td>
        <td id="latValue">—</td>
        <td id="basicMomentLat">—</td>
      </tr>
<!-- Pilot Row --><tr>
<td>Pilot</td>
        <td>80.0</td>
        <td>
          <select id="pilotSeatType" class="select-main"><option value="">— Select Seat —</option>
<option value="pilotSeat">Pilot Seat</option>
<option value="coPilotSeat">Co-Pilot Seat</option></select>
</td>
        <td>N/A</td>
        <td id="pilotSeatWeight">—</td>
        <td id="pilotSeatLong">—</td>
        <td id="pilotMomentLong">—</td>
        <td id="pilotSeatLat">—</td>
        <td id="pilotMomentLat">—</td>
      </tr>
</tbody>
</table>
</div>

? 步骤 2：创建专用 API 接口（get_data.php）

<?php header('Content-Type: application/json');
session_start();
include 'db.php';

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(405);
  echo json_encode(['error' => 'Method not allowed']);
  exit;
}

$data = [];
$action = $_POST['action'] ?? '';

if ($action === 'getAircraft') {
  $id = $conn->real_escape_string($_POST['id'] ?? '');
  $sql = "SELECT basicWeight, CGArm, lat FROM aircraft WHERE aircraftID = '$id'";
  $result = $conn->query($sql);
  if ($result && $result->num_rows > 0) {
    $data = $result->fetch_assoc();
  } else {
    $data = ['basicWeight' => '0', 'CGArm' => '0', 'lat' => '0'];
  }

} elseif ($action === 'getSeat') {
  $id = $conn->real_escape_string($_POST['id'] ?? '');
  $sql = "SELECT seatWeight, seatLong, seatLat FROM mainseat WHERE seatID = '$id'";
  $result = $conn->query($sql);
  if ($result && $result->num_rows > 0) {
    $data = $result->fetch_assoc();
  } else {
    $data = ['seatWeight' => '0', 'seatLong' => '0', 'seatLat' => '0'];
  }
}

$conn->close();
echo json_encode($data);

? 步骤 3：前端 JS 实现双向联动（含计算逻辑）

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>
function updateAircraft() {
  const id = $('#aircraftType').val();
  if (!id) return;

  $.post('get_data.php', { action: 'getAircraft', id }, function(res) {
    if (res.error) return;
    $('#basicWeightDisplay').text(res.basicWeight);
    $('#CGArmDisplay').text(res.CGArm);
    $('#latDisplay').text(res.lat);

    // 同步到 Passenger 表格
    $('#basicWeightValue').text(res.basicWeight);
    $('#CGArmValue').text(res.CGArm);
    $('#latValue').text(res.lat);
    $('#basicMomentLong').text((parseFloat(res.basicWeight) * parseFloat(res.CGArm)).toFixed(2));
    $('#basicMomentLat').text((parseFloat(res.basicWeight) * parseFloat(res.lat)).toFixed(2));
  });
}

function updatePilotSeat() {
  const id = $('#pilotSeatType').val();
  if (!id) return;

  $.post('get_data.php', { action: 'getSeat', id }, function(res) {
    if (res.error) return;
    $('#pilotSeatWeight').text(res.seatWeight);
    $('#pilotSeatLong').text(res.seatLong);
    $('#pilotSeatLat').text(res.seatLat);

    // 计算飞行员力矩（假设体重恒为 80kg）
    const weight = 80;
    $('#pilotMomentLong').text((weight * parseFloat(res.seatLong)).toFixed(2));
    $('#pilotMomentLat').text((weight * parseFloat(res.seatLat)).toFixed(2));
  });
}

// 绑定事件
$('#aircraftType').on('change', updateAircraft);
$('#pilotSeatType').on('change', updatePilotSeat);

// 页面加载后尝试恢复上次选择（可选）
$(document).ready(function() {
  // 若有 localStorage 缓存，可在此处预填 select 并触发 update
});
</script>