动态生成的股票代码列表选中元素仅返回最后一个值TWTR，无法获取选中值

问题根因 #

• 你在循环中用var声明的el变量存在变量提升，循环结束后el永远指向最后创建的那个值为TWTR的option节点，所以send函数里取el.value永远返回TWTR
• datalist关联的是输入框，选中的值存储在输入框的value属性中，你现有代码没有获取用户实际选中的输入值
• 关联datalist的输入框没有加id属性，无法直接获取它的输入值

修改步骤 #

1. 调整HTML代码 #

给关联datalist的输入框加id，方便后续获取选中值：

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
  <!-- 给input新增id="stockInput" -->
  <input id="stockInput" style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none;  text-align: center;" list="brow">
  <datalist id="brow">
    <select name="selectStock" class="selectStock" id="selectStock">
      <option></option>
    </select>
  </datalist>
  <input class="button1" onclick="send();" value="Add Stock"></input>
</form>

2. 调整JavaScript代码 #

修改send函数的取值逻辑，直接从输入框拿用户选中的值，不要复用循环里的el变量：

var select = document.getElementById("selectStock");
var options = <?php echo json_encode($tickerArray) ?>; 

for (var i = 0; i < options.length; i++) {
  // 可选优化：你的options是二维数组结构，取第一项作为值避免隐式类型转换
  var opt = options[i][0]; 
  var el = document.createElement("option");
  el.innerHTML = opt;
  el.value = opt; 
  select.appendChild(el); 
}

var open = <?php echo json_encode($openPrices) ?>;
var selected = []
// 提前获取输入框节点
const stockInput = document.getElementById('stockInput')

function send() {
  // 加判空逻辑避免插入空值
  if(!stockInput.value.trim()) return
  selected = [
    ...selected,
    {
      "x": stockInput.value, // 直接取输入框的选中值
      "y": 1.2 
    }
  ]
  // 可选：添加后清空输入框方便下次选择
  stockInput.value = ''
}

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