Javascript:将元素值表单化到集合中

Question

我有一个 HTML 页面，其中选择元素的数量发生动态变化。

    <script>
    function getValues() {
        var selects = document.getElementsByTagName('select'),
        arr = Array.prototype.slice.call(selects),
        selectValues = arr.map(function (select) {
            return select.value;
    });
        return selectValues;
    }
    </script>

<script type='text/javascript'>
    function moreSelect() {
    for (i = 0; i < number; i++) {
        // Append a node with a random text
        container.appendChild(document.createTextNode("Name " + (i+1) + ": "));
        // Create an <input> element, set its type and name attributes
        var input = document.createElement("select");
        input.name = "name" + (i+1);
        container.appendChild(input);
        // Append a line break 
        container.appendChild(document.createElement("br"));
    }
</script>

<form action="action"method="POST" onsubmit="return getValues;">

                    More selects (max. 9):<br>
                <p>
                    <input type="number" id="name" name="name" value="0"
                        min="0" max="9"><br />
                    <button type="button" onclick="moreSelect()">Add</button>
                    <br>
                <p>
                    <br>
                <div id="container" /></div>

                <p>
                    <br> <br> <input type="submit" value="Go">
            </form>

我想在 POST 方法之前将此值收集到列表或数组中，并将此参数列表提供给我的 Java Controller ，如下所示:

@RequestParam("allValues") List<String> allValues

编辑:我编辑了它，但不起作用。

Answer 1

获取所有select，通过Array.prototype.slice将它们转换为真正的Array。现在您可以使用 map 来获取所有值。 getElementsByTagName 返回一个 HTMLCollection，不支持 map() 等。

var selects = document.getElementsByTagName('select'),
    arr = Array.prototype.slice.call(selects),
    selectValues = arr.map(function (select) {
        return select.value;
    });

现在selectValues是一个选择值的数组。