动态生成select元素时无法通过PHP执行MySQL查询问题求助

问题核心原因 #

• 第一：你在提交按钮的点击事件里加了e.preventDefault()，直接阻止了表单的默认提交行为，PHP自然接收不到任何POST数据，这是你修改键名仍无法取值的核心原因
• 第二：你的第一个下拉框select元素name属性是selectStock，但PHP里默认取的键是option，就算表单正常提交也取不到对应值
• 第三：如果你需要提交第二个多选框里的所有选中股票，当前第二个select的name属性不支持接收数组，也需要调整

具体修改方案 #

1. 原生表单提交场景（页面会刷新）

直接删除btnAdd.onclick事件里的e.preventDefault();代码，让表单可以正常提交到PHP。
同时把PHP里的取值代码修改为：

$tickerChosen = $_POST["selectStock"];

即可正常拿到第一个下拉框选中的股票代码。

如果需要拿到你添加到第二个多选框里的所有股票，先把第二个select的属性修改为：

<select id="list" name="list[]" multiple>

PHP里用$_POST['list']就能拿到所有选中的股票数组，调整SQL为批量查询即可获取多只股票的开盘价。

2. 无刷新获取数据场景（推荐）

如果不想页面刷新，建议用AJAX异步提交请求，替换原有点击逻辑即可：

btnAdd.onclick = async (e) => {
  e.preventDefault();
  if (name.value == '') {
    alert('请选择股票代码');
    return;
  }
  // 异步提交选中的股票代码到PHP查询
  const res = await fetch(window.location.href, {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `selectStock=${encodeURIComponent(name.value)}&submit=1`
  });
  const openPrices = await res.json();
  // 拿到查询结果后再添加到列表
  const option = new Option(name.value, name.value);
  sb.add(option, undefined);
  selected.push({
    x: option.value,
    y: openPrices[0][0] // 对应你查询出来的最新开盘价
  });
  name.value = '';
  name.focus();
};

对应的PHP查询完成后输出JSON即可：

if (isset($_POST["submit"])) {
  $tickerChosen = $_POST["selectStock"];
  $stmt = $conn->prepare("SELECT Open FROM symbolsv2 WHERE ticker=? ORDER BY Date DESC LIMIT 2");
  $stmt->bind_param("s", $tickerChosen);
  $stmt->execute();
  $result = $stmt->get_result();
  $openPrices = $result->fetch_all();
  $stmt->close();
  echo json_encode($openPrices);
  exit;
}

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