Question

我有一个HTML页面，其中包含了dinamycally更改选择元素的数量。

    <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方法之前将这些值收集到List或Array中，并将此参数列表提供给我的Java控制器，如下所示：

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

编辑：我编辑了它，但没有用。

Answer 1

获取所有选择，通过Array.prototype.slice将它们转换为真实数组。现在，您可以使用map获取所有值。 getElementsByTagName会返回HTMLCollection，但不支持map()等。

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

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

Answer 2

您可以添加一个名为“allValues”的隐藏表单参数，并在发布表单之前使用javascript，您可以在该参数中添加所有选择值。

Javascript：将元素值表单添加到Collection

2 个答案: