Question

我想将项目从一个列表框移动到另一个列表框，我有一个jQuery，但是行为不正常。当我在后台单击左键时，它将导致所有项目从list2移至list1，但在前端，它表明list2具有价值。当我单击提交时，它将导致错误。 List1是源，而List2是目标

$(document).ready(function () {
               $(function () {
        function moveItems(origin, dest) {
            $(origin).find(':selected').appendTo(dest);
        }

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

        $('#left').on('click', function () {
            moveItems('#SelectedPanelList', '#AllPanelList');
        });

        $('#right').on('click', function () {
            moveItems('#AllPanelList', '#SelectedPanelList');
        });

        $('#leftall').on('click', function () {
            moveAllItems('#SelectedPanelList', '#AllPanelList');
        });

        $('#rightall').on('click', function () {
            moveAllItems('#AllPanelList', '#SelectedPanelList');
        });
    });

Example Image

假设我在List2--a，b，c，d中有4个项目，但是只有c，d被选中，然后在db中只有c，d得到更新，但是我希望所有在list2中的项目，即a，b， c，d应该在db中更新。请提出建议。

HTML：对于列表1

@Html.DropDownListFor(model => model.AllPanelList, Model.AllPanelList, new { @id = "AllPanelList", @class = "form-control", multiple = "multiple" })

对于列表2

@Html.DropDownListFor(model => model.SelectedPanelListArray, Model.SelectedPanelList, new { @id = "SelectedPanelList", SelectListItem="true", @class = "form-control", multiple = "multiple" })

Answer 1

$('button').click(function(){
var $options = $("#selection > option").clone();
$('#copy').append($options);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selection">
  <option>select</option>
  <option>option1</option>
  <option>option2</option>
</select>

<select id="copy">
</select>

<button>copy</button>

jQuery将项目从一个列表框移动到另一个列表框

1 个答案: