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/

删除了一些代码，并插入了一个额外的按钮。看看。

如何使用for循环从选择选项框获取值[选择选项框是动态创建的]

2 个答案: