Question

好吧，原来的请求似乎令人困惑，所以让我尝试重新措辞。我有一个表单，见下面的代码，有两个选择，用户将事物从可用位置列表（一个）移动到选定位置列表（两个）并输入一些其他字段（我包括一个文本字段作为示例），我需要能够看到第一个选择（一个）中的值和第二个列表中的值（两个）

将会有大量值，因此用户只需单击或按住Ctrl键并单击他们想要的值就不实用。

<!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="1">Loc1</option>
            <option value="2">Loc2</option>
            <option value="3">Loc3</option>
        </select>
        &nbsp;
        &nbsp;
        <select id="Two" name="Two" multiple="multiple">
        </select>

        <br />
        <input type="text" name="something" /><br />
        <input type="hidden" name="form" value="1" />
        <input type="button" id="leftall" value="<<" />
        <input type="button" id="left" value="<" />
        <input type="button" id="right" value=">" />
        <input type="button" id="rightall" value=">>" />
        <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>

Answer 1

这个问题令人困惑，因为我们不确定你想要在前端显示什么（HTML + Javascript），你想要发送到后端（PHP），你想要什么在数据库中插入/更新/删除。

我想到的最简单的解决方案如下：

您的数据库中应该有3个表：users，locations和user_locations。 user_locations应至少有2列：“user_id”和“location_id”。

HTML：添加隐藏的新html输入：

<input type="hidden" id="two_values" name="two_values" value="" />

Javascript：当用户点击提交按钮时，请获取第二个下拉菜单的所有值，然后将其发送到服务器。像这样：

<script>
    $(document).ready(function() {
        // on user clicks submit button, this code will be executed first
        $('form').submit(function() {
            // we'll take all values of the Two dropdown and put them in 1 string
            var all_values = '';
            $("#Two option").each(function() {
                if(all_values === '') {
                    all_values += $(this).val();
                } else {
                    all_values += ',' + $(this).val();
                }
            });
            $('#two_values').val(all_values);
        });
    });
</script>

PHP：获取two_values，并将它们拆分为数组。

if(isset($_POST['form'])) {
    $two_values_arr = explode(',', $_POST['two_values']);
    // ...
}

PHP和MySQL ：首先，删除之前用户的所有位置：

$q = 'DELETE FROM `locations` WHERE `user_id` = ' . $user_id;
// run the $q ..

然后，执行循环以插入此用户的每个值

foreach($two_values_arr as $location_id) {
    $q = 'INSERT INTO `user_locations` (user_id, location_id) VALUES (' . $user_id . ', ' . $location_id . ')';
    // run the $q ..
}

查看HTML ：当用户查看该页面时，您应该获取所有用户的位置，用户应该打印到两个下拉列表的位置，以及他在One下拉列表中没有的位置< / p>

如何以html格式提交项目列表

1 个答案: