如何实现双下拉菜单独立选择并同步显示数据-js教程-PHP中文网

如何实现双下拉菜单独立选择并同步显示数据

本文讲解如何解决PHP表单中两个select下拉框（如机型与飞行员座位）相互干扰、无法同时保留各自选中值的问题，通过隐藏字段+表单协同或AJAX异步更新两种专业方案，确保$basicWeight和pilotSeatWeight等数据可并行显示、互不覆盖。

本文讲解如何解决php表单中两个select下拉框（如机型与飞行员座位）相互干扰、无法同时保留各自选中值的问题，通过隐藏字段+表单协同或ajax异步更新两种专业方案，确保`$basicweight`和`pilotseatweight`等数据可并行显示、互不覆盖。

在当前代码中，aircraftType 和 pilotSeatType 分别位于两个独立的

中，每次提交都会触发整页刷新，并仅携带自身字段（如 $_POST['aircraftType'] 或 $_POST['pilotSeatType']），导致另一字段丢失——这是“下拉框只能提交一次”的根本原因。PHP 是无状态语言，单次请求无法自动记住用户之前在另一表单中的选择。

✅ 方案一：隐藏字段协同（兼容性好，无需JS框架）

将两个下拉框合并为一个表单，并在每个

✅ 优势：零依赖、语义清晰、服务端逻辑不变；只需统一处理 $_POST 中两个键即可。

⚠️ 注意：务必使用 htmlspecialchars() 防止 XSS；避免重复包含 db.php 多次（建议顶部统一引入并复用 $conn）。

随后，在 PHP 数据查询部分统一处理：

// 统一获取并查询两个值
$basicWeight = $CGArm = $lat = 0;
$pilotSeatWeight = $pilotSeatLong = $pilotSeatLat = 0;

// 查询机型数据
if (!empty($_POST['aircraftType']) && $_POST['aircraftType'] !== '-') {
  $stmt = $conn->prepare("SELECT basicWeight, CGArm, lat FROM aircraft WHERE aircraftID = ?");
  $stmt->bind_param('s', $_POST['aircraftType']);
  $stmt->execute();
  $result = $stmt->get_result();
  if ($result->num_rows > 0) {
    [$basicWeight, $CGArm, $lat] = $result->fetch_row();
  }
}

// 查询座位数据
if (!empty($_POST['pilotSeatType']) && $_POST['pilotSeatType'] !== '-') {
  $stmt = $conn->prepare("SELECT seatWeight, seatLong, seatLat FROM mainseat WHERE seatID = ?");
  $stmt->bind_param('s', $_POST['pilotSeatType']);
  $stmt->execute();
  $result = $stmt->get_result();
  if ($result->num_rows > 0) {
    [$pilotSeatWeight, $pilotSeatLong, $pilotSeatLat] = $result->fetch_row();
  }
}

此时，$basicWeight 与 $pilotSeatWeight 可安全共存，并在表格中同时输出：

<td class="passenger-details-td"><?php echo number_format($basicWeight, 1); ?></td>
<!-- ... -->
<td class="passenger-details-td"><?php echo number_format($pilotSeatWeight, 1); ?></td>

✅ 方案二：AJAX 动态加载（推荐用于生产环境）

彻底解耦交互，避免整页刷新：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>
$(document).ready(function() {
  // 监听机型变更
  $('select[name="aircraftType"]').on('change', function() {
    const id = $(this).val();
    $.post('fetch_aircraft.php', {id: id}, function(data) {
      $('#basic-weight').text(data.weight || '0.0');
      $('#cg-arm').text(data.cgarm || '0.0');
      $('#lat-mm').text(data.lat || '0.0');
    });
  });

  // 监听座位变更
  $('select[name="pilotSeatType"]').on('change', function() {
    const id = $(this).val();
    $.post('fetch_seat.php', {id: id}, function(data) {
      $('#pilot-seat-weight').text(data.weight || '0.0');
      $('#pilot-cg-long').text(data.long || '0.0');
      $('#pilot-lat').text(data.lat || '0.0');
    });
  });
});
</script><!-- 在表格中使用 ID 定位更新 --><td id="basic-weight"><?php echo $basicWeight ?? '0.0'; ?></td>
<td id="pilot-seat-weight"><?php echo $pilotSeatWeight ?? '0.0'; ?></td>

后端 fetch_aircraft.php 示例：

<?php include 'db.php';
$id = $_POST['id'] ?? '';
$stmt = $conn->prepare("SELECT basicWeight, CGArm, lat FROM aircraft WHERE aircraftID = ?");
$stmt->bind_param('s', $id);
$stmt->execute();
$result = $stmt->get_result();
echo json_encode($result->fetch_assoc());