无法从动态数据列表中获取所选元素的值（仅获取最后一个元素）

Question

Context: I have a list with 500+ tickers that I'm retrieving from MySQL, but when I select a ticker, I can only get the value of the last ticker (which is TWTR) and not the selected value.上下文：我有一个包含 500 多个代码的列表，我正在从 MySQL 检索这些代码，但是当我选择一个代码时，我只能获取最后一个代码（即 TWTR）的值，而不是所选值。 The goal with this is to pass this data to an array of objects where x is the ticker name这样做的目的是将此数据传递给一个对象数组，其中x是股票代码名称

HTML: HTML：

      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input 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>
        <!-- <input class="button1" type="submit" name="submit" id="submit" onclick="send();"></input> -->
      </form>

Javascript: Javascript：

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

    for (var i = 0; i < options.length; i++) {
      var opt = options[i]; 
      var el = document.createElement("option");
      el.innerHTML = opt;
      el.value = opt; 
      select.appendChild(el); 
    }

var open = <?php echo json_encode($openPrices) ?>;

    var selected = []


    function send() {

      selected = [
        ...selected,
        {
          "x": el.value, //The goal is to pass the tickers added/selected here, creating multiple objects inside of this array where each time adds a new stock, it gets added as a new object. As of now, I keep getting the last array which is TWTR
          "y": 1.2 
        }
      ]

This is the data structure of the variable options (the list the user can select from):这是变量options的数据结构（用户可以从中选择的列表）：

var options = [["A"],["AAL"],["AAP"],["AAPL"],["ABBV"],["ABC"]...,["TWTR"]]

This is the data structure of the variable selected when I press Add Stock button 3 times:这是我按 3 次Add Stock按钮时selected的变量的数据结构：

[
    {
        "x": "TWTR",
        "y": 1.2
    },
    {
        "x": "TWTR",
        "y": 1.2
    },
    {
        "x": "TWTR",
        "y": 1.2
    }
]

Any help is very welcome!非常欢迎任何帮助！

 <!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> <div class="row"> <div class="col"> <form> <input style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;" list="brow"> <datalist id="brow"> <select name="selectStock" id="selectStock"> </select> </datalist> <input class="button1" onclick=" send();" value="Add Stock"></input> </form> </div> </div> </body> <script> var dropdown = document.getElementById("selectStock"); var options = [ ["A"], ["AAL"], ["AAP"], ["AAPL"], ["ABBV"], ["ABC"], ["TWTR"] ]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.innerHTML = opt; el.value = opt; dropdown.appendChild(el); } var selected = [] function send() { console.log(dropdown.value) console.log(selected) selected.push({ x: dropdown.value, y: 1.2, }); } </script> </html>

Answer 1

When you use a <datalist> , you don't use <select> .使用<datalist> ，不要使用<select> 。 The value of the datalist is in the associated <input> . datalist 的值在关联的<input> 。

In your snippet, the style of the input makes it impossible for the user to selet something from it.在您的代码段中，输入的样式使用户无法从中选择某些内容。

 var dropdown = document.getElementById("selectStock"); var input = document.getElementById("brow"); var options = [ ["A"], ["AAL"], ["AAP"], ["AAPL"], ["ABBV"], ["ABC"], ["TWTR"] ]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.innerHTML = opt; el.value = opt; dropdown.appendChild(el); } var selected = [] function send() { selected.push({ x: brow.value, y: 1.2, }); console.log(selected); }

 <!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> <div class="row"> <div class="col"> <form> <input id="brow" list="selectStock"> <datalist id="selectStock"> </datalist> <input class="button1" onclick=" send();" value="Add Stock"></input> </form> </div> </div> </body> </html>

无法从动态数据列表中获取所选元素的值（仅获取最后一个元素）

问题描述

1 个解决方案

解决方案1
0 2021-10-15 22:31:06

无法从动态数据列表中获取所选元素的值（仅获取最后一个元素）

问题描述

1 个解决方案

解决方案1 0 2021-10-15 22:31:06

解决方案1
0 2021-10-15 22:31:06