JavaScript expert, help please!

Question

User-1651604128 posted

Hi JavaScriopt Expert:

I am adding Dual Listbox in my MVC razor view, the JavaScript codes is like this:

$(function () {
        $("#ShiftRight,#ShiftLeft").click(function (event) {
            var ID = $(event.target).attr("ID");
            var ChooseFrom = ID == "ShiftRight" ? "#ChooseLeft" : "#ChooseRight";
            var moveTo = ID == "ShiftRight" ? "#ChooseRight" : "#ChooseLeft";
            var SelectData = $(ChooseFrom + " :selected").toArray();
            $(moveTo).append(SelectData);
            SelectData.remove;
        });

});

and razor view:

<td>
                @Html.ListBox("ChooseLeft", ViewBag.listbox1 as IEnumerable<SelectListItem>, new { size = "15", style = "width:160px;", multiple = "multiple" })
            </td>
            <td>
                <input id="ShiftRight" type="button" value="> " />
            </td>
            <td>
                <input id="ShiftLeft" type="button" value="< " />
            </td>
            <td>
                @Html.ListBox("ChooseRight", null, new { size = "15", style = "width:160px;", multiple = "multiple" })
            </td>

This is working fine, but it is only moving one selected item on every click ">" or "<" , now I want to add ">>" and "<<" which remove all items from left to right or from right to left without needing to select. Does anybody know how to make it working? Thanks a lot for any help,

Answer 1

User-474980206 posted

just select all options:

               var SelectData = $(ChooseFrom + " option").toArray();

Answer 2

User2103319870 posted

An Alternative method is to your the Children method from Jquery

Sample Implementation

<script>
            $(function () {
                $("#ShiftRight,#ShiftLeft").click(function (event) {
                    var ID = $(event.target).attr("ID");
                    var ChooseFrom = ID == "ShiftRight" ? "#ChooseLeft" : "#ChooseRight";
                    var moveTo = ID == "ShiftRight" ? "#ChooseRight" : "#ChooseLeft";
                    var SelectData = $(ChooseFrom + " :selected").toArray();
                    $(moveTo).append(SelectData);
                    SelectData.remove;
                });


                $("#ShiftAllRight,#ShiftAllLeft").click(function (event) {
                    var ID = $(event.target).attr("ID");
                    var ChooseFrom = ID == "ShiftAllRight" ? "#ChooseLeft" : "#ChooseRight";
                    var moveTo = ID == "ShiftAllRight" ? "#ChooseRight" : "#ChooseLeft";
                    var SelectData = $(ChooseFrom + " option").toArray();
                    //Move all items to destination Listbox
                    $(ChooseFrom).children().appendTo(moveTo);
                    SelectData.remove;
                });

            });
        </script>

HTML

  @{
            var MyList = new List<SelectListItem>(){
        new SelectListItem(){Value="1",Text="item1"},
        new SelectListItem(){Value="2",Text="item2"},
        new SelectListItem(){Value="3",Text="item3"}
    };


        }
        @Html.ListBox("ChooseLeft", MyList, new { size = "15", Multiple = "multiple" });
        <input id="ShiftAllRight" type="button" value=">> " />
        <input id="ShiftRight" type="button" value="> " />
        <input id="ShiftLeft" type="button" value="< " />
        <input id="ShiftAllLeft" type="button" value="<< " />
        @Html.ListBox("ChooseRight", MyList, new { size = "15", style = "width:160px;", multiple = "multiple" })

• Sample Working Demo

Answer 3

User-1651604128 posted

just select all options:

               var SelectData = $(ChooseFrom + " option").toArray();

Thank you so much, this is simple fix, I thought the " option" should be "all", but it does not work. so in this case, "option" = " all"

Much appreciated,