如何将Select选项的data属性值传递给PHP变量？

你遇到的核心问题是：PHP是服务器端语言，页面渲染时它已经执行完毕，没法直接获取用户后续在浏览器里选择的下拉框data属性值。下面给你两种可行的实现方案：

方案一：前端JS实时计算（即时更新结束时间） #

用JavaScript监听下拉框的选择变化，实时获取选中选项的data-dur值，计算结束时间后更新隐藏输入框，提交表单时直接传这个计算好的值。

修改后的完整表单代码：

<form action="schedule.php" method="post" id="schedule">
  <div class="form-group mb-2" >
    <?php $movies = $db->query("SELECT * FROM movies")->fetchAll();?>

    <label for="title" class="control-label">Add Movie</label>
    <select class="form-control selectpicker" name="title" id="title" data-live-search="true" data-title="Movie name" data-size="5" required>
      <?php foreach($movies as $movie): ?>
        <option value='<?= $movie['title'] ?>' data-dur='<?= $movie['duration'] ?>'>&nbsp;&nbsp;<?= $movie['title'] ?></option>
      <?php endforeach; ?>
    </select>
  </div>

  <?php $start_time = "10:30"; ?>
  <input type="hidden" name="id" value="">
  <input type="hidden" name="start_time" id="start_time" value="<?= $start_time  ?>">
  <input type="hidden" name="end_time" id="end_time" value="">

  <script>
    // 获取页面元素
    const titleSelect = document.getElementById('title');
    const startTimeInput = document.getElementById('start_time');
    const endTimeInput = document.getElementById('end_time');

    // 计算结束时间的函数
    function updateEndTime() {
      const selectedOpt = titleSelect.options[titleSelect.selectedIndex];
      const duration = parseInt(selectedOpt.getAttribute('data-dur'));
      const startTime = startTimeInput.value;
      // 转成时间戳计算，再转成指定格式
      const endTimeStamp = new Date(startTime).getTime() + duration * 60 * 1000;
      const formattedEndTime = new Date(endTimeStamp).toISOString().slice(0,16).replace('T',' ');
      endTimeInput.value = formattedEndTime;
    }

    // 页面加载时初始化一次，处理默认选中项
    window.onload = updateEndTime;
    // 下拉框切换时重新计算
    titleSelect.addEventListener('change', updateEndTime);
  </script>
</form>

提交表单后，schedule.php里直接通过$_POST['end_time']就能拿到计算好的结束时间。

方案二：PHP后端查询计算（更安全可靠） #

前端只传选中的电影名称，后端根据名称从数据库查询对应的时长，再计算结束时间。这种方式避免了前端篡改时长数据，安全性更高。

前端表单（可以简化，不需要data-dur） #

<form action="schedule.php" method="post" id="schedule">
  <div class="form-group mb-2" >
    <?php $movies = $db->query("SELECT * FROM movies")->fetchAll();?>

    <label for="title" class="control-label">Add Movie</label>
    <select class="form-control selectpicker" name="title" id="title" data-live-search="true" data-title="Movie name" data-size="5" required>
      <?php foreach($movies as $movie): ?>
        <option value='<?= $movie['title'] ?>'>&nbsp;&nbsp;<?= $movie['title'] ?></option>
      <?php endforeach; ?>
    </select>
  </div>

  <?php $start_time = "10:30"; ?>
  <input type="hidden" name="id" value="">
  <input type="hidden" name="start_time" value="<?= $start_time  ?>">

</form>

后端schedule.php处理逻辑 #

<?php
// 假设$db是你的数据库连接实例
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $selectedTitle = $_POST['title'];
    $startTime = $_POST['start_time'];

    // 用预编译语句查询，防止SQL注入
    $stmt = $db->prepare("SELECT duration FROM movies WHERE title = ?");
    $stmt->execute([$selectedTitle]);
    $movieData = $stmt->fetch();

    if ($movieData) {
        $dur = $movieData['duration'];
        // 计算结束时间
        $endTime = date('Y-m-d H:i', strtotime("{$dur} minutes", strtotime($startTime)));
        // 这里可以把$endTime存入数据库或做其他处理
        echo "电影结束时间：{$endTime}";
    } else {
        echo "未找到选中的电影信息";
    }
}
?>

如果你的start_time是固定值，也可以直接在后端定义，不用从表单传递。

内容的提问来源于stack exchange，提问作者Tihomir Todorov