Answered by:
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,
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