locked
JavaScript expert, help please! RRS feed

  • 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,

    Monday, January 22, 2018 2:54 PM

Answers

  • User-474980206 posted

    just select all options:

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 4:40 PM
  • 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" })
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 4:57 PM
  • 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,

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 7:30 PM

All replies

  • User-474980206 posted

    just select all options:

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 4:40 PM
  • 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" })
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 4:57 PM
  • 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,

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 7:30 PM