如何使用for循環從選擇選項框中獲取值[選擇選項框是動態創建的]

Question

我正在嘗試從選擇選項框中獲取值。 但我只得到第一個選項框值。

我想要所有被選中的選項框值。假設在代碼中創建了 10 個選擇選項框，當用戶點擊按鈕時，我想要所有這 10 個選擇選項框值並存儲在變量中或顯示被選中的選項由用戶。

我已經完成了一些代碼，請從 jsfiddle 網站上的評論部分參考我的工作。 為了更好地理解，你可以參考。 抱歉我的菜鳥語言，我是 stackoverflow 的新手。 請不要猶豫，編輯我想要的信息。

Answer 1

您的代碼中所有元素的 id 都相同。 使用document.querySelectorAll獲取元素列表。

 function getdata() { var num = document.getElementById("number").value; console.log(num); $(document).ready(function() { for (var i = 0; i < num; i++) { $('<div><select id="select-meal-type' + i + '"><option value="TYPE A">TYPE A</option><option value="TYPE B">TYPE B</option><option value="TYPE C">TYPE C</option></select><br></div>').appendTo('#container'); } }); } function getValues() { var nodeList = document.querySelectorAll("[id^=select-meal-type]") var values = Array.from(nodeList).map(val => val.value) console.log(values); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br><br> type a number<input type="text" id="number"> <br><br> <div id="container"></div> <button onclick="getdata()">GET DATA</button> <button onclick="getValues()">GET VALUES</button>

Answer 2

查看以下 jsfiddle 鏈接：[jsfiddle.net/ypb9zLe8/][1]

[1]: http://jsfiddle.net/ypb9zLe8/

刪除了一些代碼並插入了一個額外的按鈕。 看一看。