無法從動態數據列表中獲取所選元素的值（僅獲取最后一個元素）

Question

上下文：我有一個包含 500 多個代碼的列表，我正在從 MySQL 檢索這些代碼，但是當我選擇一個代碼時，我只能獲取最后一個代碼（即 TWTR）的值，而不是所選值。 這樣做的目的是將此數據傳遞給一個對象數組，其中x是股票代碼名稱

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：

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 
        }
      ]

這是變量options的數據結構（用戶可以從中選擇的列表）：

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

這是我按 3 次Add Stock按鈕時selected的變量的數據結構：

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

非常歡迎任何幫助！

 <!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

使用<datalist> ，不要使用<select> 。 datalist 的值在關聯的<input> 。

在您的代碼段中，輸入的樣式使用戶無法從中選擇某些內容。

 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