Question

当我使用jQuery将选择列表中的移动项目移动到另一个列表时，它移动得很好，但是当我重新加载页面时，它会返回到上一个列表。我想知道如何保存它，所以当我重新加载页面时它不会回来？

<script>
    $(document).ready(function () {
        $('#btnRight').click(function (e) {
            var selectedOpts = $('#lstBox1 option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $('#lstBox2').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });

        $('#btnLeft').click(function (e) {
            var selectedOpts = $('#lstBox2 option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $('#lstBox1').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });

        $('#btnRight2').click(function (e) {
            var selectedOpts = $('#lstBox2 option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $('#lstBox3').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });


        $('#btnLeft2').click(function (e) {
            var selectedOpts = $('#lstBox3 option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }

            $('#lstBox2').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });
    });
</script>


    @foreach (var item in Model)
    {

            <hr />
            <table>
                <tr>
                    <td style='width:160px;'>
                        <b>TO DO:</b><br />
                        <select multiple="multiple" id='lstBox1'>
                            <option>@Html.DisplayFor(model => item.Events.Vanue)</option>

                        </select>
                    </td>
                    <td style='width:50px;text-align:center;vertical-align:middle;'>
                        <input type="button" id="btnRight" value="-" />
                        <br /><input type="button" id="btnLeft" value="<" />
                    </td>
                    <td style='width:200px;'>
                        <b>IN PROGRESS: </b><br />
                        <select multiple="multiple" id='lstBox2'>

                        </select>
                    </td>
                    <td style='width:50px;text-align:center;vertical-align:middle;'>
                        <input type="button" id="btnRight2" value="-" />
                        <br /><input type="button" id="btnLeft2" value="<" />
                    </td>
                    <td style='width:160px;'>
                        <b>DONE: </b><br />
                        <select multiple="multiple" id='lstBox3'>

                        </select>
                    </td>
                </tr>
            </table>

Answer 1

您需要找到一种方法来保存网站的状态。有很多选择。您可以从localStorage上的这篇文章开始。我发现它是一个很好的底漆。

保存已移动的项目

1 个答案: