PHP读取MySQL生成动态选项列表时如何获取用户选中的ticker值

核心问题原因 #

• 你采用的是input + datalist的联想下拉交互方案，用户实际操作的对象是id为name的输入框，而非嵌套在datalist内部未对外展示的select元素，因此给select绑定的change事件不会被触发，拿到的固定第一个值是select的默认初始值。
• datalist标签本身不需要嵌套select，直接往datalist下添加option元素即可生效。

调整方案 #

你只需要做两处修改：

1. 移除datalist内部的select标签，直接把option生成到datalist下
2. 给id为name的输入框绑定事件，获取输入框的值即为用户选中的ticker

完整修改后代码： #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="..." method = "post">
    <input list="brow" id="name" name="name" placeholder="Enter a Stock" autocomplete="on" style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none;  text-align: center;">
    <!-- 移除多余的select标签，直接保留datalist -->
    <datalist id="brow" name="brow"></datalist>
  </form>
</body>
<script>
  // 改为获取datalist元素生成选项
  var dropdown = document.getElementById("brow");
  //let options = <?php echo json_encode($tickerArray) ?>; //get data from MySQL tickers

  let options = [
    ["A"],
    ["AAPL"],
    ["TSLA"],
    ["HOOD"]
  ]
  for (var i = 0; i < options.length; i++) {
    var ticker = options[i][0]; // 取数组中的字符串类型股票代码
    var opt = document.createElement("option");
    opt.value = ticker;
    dropdown.appendChild(opt);
  }

  // 给输入框绑定input事件，选中选项时会触发
  document.getElementById('name').addEventListener('input', function() {
    console.log('You selected: ', this.value);
  });
</script>
</html>

补充说明 #

如果你的需求是用常规下拉选择器而非输入联想，直接保留select元素、去掉datalist和关联的input即可，原有给select绑定change事件的逻辑就可以正常生效。

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