Two List Boxes Add, Remove, Append, Sort and Read

Two List Boxes in html

     Mostly we are used the <select> tag for drop down but we can also used in list box, to enable this feature just add the "size=?" attribute and If you want to allow user to select more than one list item from the list box again you need to put the "multiple" attribute.

Details of design

     Just we have put the two list boxes and two link button inside the tables, and put a button a button outside of the table for getting or saving the value.

<table>
 <tr align="left">
  <td>   
   <select style="width: 150px;" id="list_All" name="sometext" size="5" multiple>
   </select>
  </td>
  <td>
   <a href="javascript:add_to_list(event);" onclick="" style="width:25px;">&gt;&gt;</a>
   <br />
   <a href="javascript:remove_from_list(event);" onclick="" style="width:25px;">&lt;&lt;</a>
  </td>
  <td>
   <select style="width: 150px;" id="list_Selected" name="sometext" size="5" multiple>
   </select>
  </td>
 </tr>
</table>

<input type="button" onclick="Get_Selected_list();" value="Get Selected Value"/>

Forward to another list

     When we have move the item(s) List1 to List2, add all the selected list item(s) from list1 to list2 and remove all the selected list item(s) from list1.

function add_to_list(evt)
{
 var ListSelected_selected = $("#list_Selected");
 var ListAll_selected = $("#list_All option:selected");
 $(ListSelected_selected).append($(ListAll_selected).clone());
 $(ListAll_selected).remove();
}

Backward to First List box

     When we have removing the list item(s) from the list2, we should need to move the selected list item(s) to list1 and remove the selected list item(s) from the list2. And If you want to sort the list1 to previous state Just you can call the sort() function like mention below.

function remove_from_list(evt)
{
 var ListSelected_selected = $("#list_Selected option:selected");
 var ListAll_selected = $("#list_All");
 $(ListAll_selected).append($(ListSelected_selected).clone());
 $(ListSelected_selected).remove();
 Sort("list_All");
}

Sorting the list items

     The following function is used to sort the List items, Just you need to pass the ID to sort(id) function it will sort the list box list items.

function Sort(elementId)
{
 var sortedList = $.makeArray($("#" + elementId + " option")).sort(function (a, b) {
  return $(a).text() < $(b).text() ? -1 : 1;
 });
 $("#" + elementId).empty().html(sortedList);
}

Retrieve/Read the list box items

     Finally you need to pass the selected list item(s) to store database or display, you can use the following function. In the below function we used each method to read the value, this method is read the entire item from the list box.

function Get_Selected_list()
{
 var ar_st_wl = [];


 $("#list_Selected  option").each(function () {
  ar_st_wl.push($(this).val());
 });
 var st_arr = ar_st_wl.join("),(");
 st_arr = "(" + st_arr + ")";
 alert(st_arr);
}

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement