如何在PHP表单中同步保留多个下拉框的选择结果并动态显示数据-js教程-PHP中文网

如何在PHP表单中同步保留多个下拉框的选择结果并动态显示数据

本文讲解如何解决php中两个独立post表单（如机型与飞行员座位选择）相互覆盖导致数据丢失的问题，通过隐藏字段协同传递状态，或更优地采用ajax实现无刷新联动更新。

本文讲解如何解决php中两个独立post表单（如机型与飞行员座位选择）相互覆盖导致数据丢失的问题，通过隐藏字段协同传递状态，或更优地采用ajax实现无刷新联动更新。

在您的代码中，aircraftForm 和 pilotForm 是两个独立的 POST 表单，每次提交都会触发整页刷新，并仅携带自身

✅ 正确思路：统一状态管理，而非分离提交

方案一：隐藏字段协同（兼容纯PHP，需谨慎使用）

为每个表单添加对方当前选中的值作为隐藏字段，确保每次提交都“记住”另一项选择：

<!-- 在 aircraftForm 中增加 pilotSeatType 隐藏字段 -->

<!-- 在 pilotForm 中增加 aircraftType 隐藏字段 -->

⚠️ 注意事项：

必须在 PHP 数据查询逻辑前统一处理两个参数：

$selectedAircraftID = $_POST['aircraftType'] ?? '0';
$selectedSeatID     = $_POST['pilotSeatType'] ?? '0';

// 查询 aircraft（若 ID 有效）
if ($selectedAircraftID !== '-' && $selectedAircraftID !== '0') {
    $sql = "SELECT * FROM aircraft WHERE aircraftID = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $selectedAircraftID);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $basicWeight = $row['basicWeight'];
        $CGArm = $row['CGArm'];
        $lat = $row['lat'];
    }
}

// 查询 seat（若 seatID 有效）
if ($selectedSeatID !== '-' && $selectedSeatID !== '0') {
    $sql = "SELECT * FROM mainseat WHERE seatID = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $selectedSeatID);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $pilotSeatWeight = $row['seatWeight'];
        $pilotSeatLong = $row['seatLong'];
        $pilotSeatLat = $row['seatLat'];
    }
}

使用 htmlspecialchars() 防止 XSS；优先使用 预处理语句（Prepared Statements） 替代拼接 SQL，杜绝 SQL 注入风险（您原代码中存在严重安全隐患）。

方案二（推荐）：AJAX + JSON（现代、健壮、无刷新）

将表单改为纯前端交互，通过 AJAX 异步获取数据，彻底避免页面重载和状态丢失：

btpanel phpsite 宝塔面板PHP网站

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

下载

<!-- 移除 form 标签，改用原生 select + JS -->
<select id="aircraftSelect" class="aircraft-select"><option value="-">N/A</option>
<?php $sql = "SELECT aircraftID FROM aircraft";
  $result = $conn->query($sql);
  while($row = $result->fetch_assoc()) {
      echo "<option value="{$row[" aircraftid>{$row['aircraftID']}</option>";
  }
  ?>
</select><select id="pilotSeatSelect" class="select-main"><option value="-">N/A</option>
<option value="pilotSeat">Pilot Seat</option>
<option value="coPilotSeat">Co Pilot Seat</option></select><!-- 显示区域 --><div id="weightDisplay">
  <p><strong>Basic Weight:</strong> <span id="basicWeight">—</span> kg</p>
  <p><strong>Pilot Seat Weight:</strong> <span id="pilotSeatWeight">—</span> kg</p>
</div>

// 使用 fetch 实现轻量 AJAX
async function loadWeightData() {
  const aircraftID = document.getElementById('aircraftSelect').value;
  const seatID = document.getElementById('pilotSeatSelect').value;

  const params = new URLSearchParams({ aircraftID, seatID });
  try {
    const res = await fetch('get_weights.php?' + params);
    const data = await res.json();

    document.getElementById('basicWeight').textContent = 
      data.basicWeight || '—';
    document.getElementById('pilotSeatWeight').textContent = 
      data.pilotSeatWeight || '—';
  } catch (e) {
    console.error('Failed to load weights:', e);
  }
}

document.getElementById('aircraftSelect').addEventListener('change', loadWeightData);
document.getElementById('pilotSeatSelect').addEventListener('change', loadWeightData);

后端 get_weights.php 示例（安全、简洁）：

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

$aircraftID = $_GET['aircraftID'] ?? null;
$seatID     = $_GET['seatID']     ?? null;

$data = ['basicWeight' => null, 'pilotSeatWeight' => null];

if ($aircraftID && $aircraftID !== '-') {
    $stmt = $conn->prepare("SELECT basicWeight FROM aircraft WHERE aircraftID = ?");
    $stmt->bind_param("s", $aircraftID);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($row = $result->fetch_assoc()) {
        $data['basicWeight'] = $row['basicWeight'];
    }
}

if ($seatID && $seatID !== '-') {
    $stmt = $conn->prepare("SELECT seatWeight FROM mainseat WHERE seatID = ?");
    $stmt->bind_param("s", $seatID);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($row = $result->fetch_assoc()) {
        $data['pilotSeatWeight'] = $row['seatWeight'];
    }
}

echo json_encode($data);
?>