获取选择值列表作为隐藏字段中分隔的管道并提交答案

【问题标题】：Get list of select values as pipe delimited in hidden field and submit获取选择值列表作为隐藏字段中分隔的管道并提交
【发布时间】：2018-02-25 21:57:50
【问题描述】：

我有一个带有两个选择列表的网络表单，用户将他们想要的项目从一个选择框移动到另一个选择框，当用户点击“保存”按钮时，我想获取选择框中所有值的列表命名为“Two”并将它们输入到名为“TwoArray”的隐藏字段中，然后提交表单。我以为我可以使用 .map 来执行此操作，但我无法弄清楚，到目前为止的代码如下。注意：我想要名称为二的 Select 中的所有值的分隔列表，无论它们是否被“选中”。请帮忙！此示例中隐藏字段中的输出应为“103,109”

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test for P1727410</title>
    <script src="/ref-files/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            function moveItems(origin, dest) {
                $(origin).find(':selected').appendTo(dest);
            }

            function moveAllItems(origin, dest) {
                $(origin).children().appendTo(dest);
            }

            $('#left').click(function () {
                moveItems('#Two', '#One');
            });

            $('#right').on('click', function () {
                moveItems('#One', '#Two');
            });

            $('#leftall').on('click', function () {
                moveAllItems('#Two', '#One');
            });

            $('#rightall').on('click', function () {
                moveAllItems('#One', '#Two');
            });
        });
    </script>
</head>
<body>
    <h2>Test for P1727410</h2>
    Available Locations | Selected Locations
    <form method="POST" action="#">
        <select id="One" name="One" multiple="multiple">
            <option value="100">Loc1</option>
            <option value="101">Loc2</option>
            <option value="102">Loc3</option>
        </select>
        &nbsp;
        &nbsp;
        <select id="Two" name="Two" multiple="multiple">
            <option value="103">Loc4</option>
            <option value="109">Loc10</option>
        </select>

        <br />
        <input type="text" name="something" /><br />
        <input type="hidden" name="form" value="1" />
        <input type="hidden" name="TwoArray" value="" />
        <input type="button" id="leftall" value="<<" />
        <input type="button" id="left" value="<" />
        <input type="button" id="right" value=">" />
        <input type="button" id="rightall" value=">>" />
        <input type="button" id="update" value="Save" />
        <br />
        <input type="Submit" name="Submit" value="Submit" />
    </form>
    <p>
    <?php
        if(isset($_POST['form'])) {
            echo "<pre>";
            print_r($_POST);
            echo "</pre>";
        }
    ?>
    </p>
</body>
</html>

【问题讨论】：

标签： javascript php jquery html forms

【解决方案1】：

尝试使用数组进行存储，然后使用$.each() 循环遍历捕获选项值的子项。我将此函数放在 JavaScript 的最底部，在所有其他侦听器之下：

// Listen for an input click (you can listen for whatever)
$('input').on('click',function(e) {
    // Set an array
    var getAllVals  =   [];
    // Loop through this select's options (children)
    $.each($('#Two').children(),function(k,v) {
        // Store the "value" attribute values
        getAllVals.push($(v).attr('value'));
    });
    // Place the imploded array into the field
    $('input[name=TwoArray]').val(getAllVals.join(','));
});

这是一个 jsFiddle 演示，输入为 text，因此您可以看到它的变化：

https://jsfiddle.net/kc66x5sr/

【讨论】：