jQuery.SelectListActions is a jQuery plugin that gives you several actions to perform with Select lists.

With this plugin you can:

• Move selected item(s) from a source list to a destination list
• Move all items from a source list to a destination list
• Move selected item(s) from a source list to a destination list and deleting the selected item(s) from the source list
• Move all items from a source list to a destination list and deleting all items from the source list
• Remove selected item(s) from a list
• Move selected item(s) up or down a list

[topads][/topads]

Repository

Download the plugin from GitHub jquery.selectlistactions.js

Usage

Include jquery.selectlistactions.js in your page

<script src="js/jquery.selectlistactions.js"></script>

And then make your calls like this:

Scenario 1: You have two lists and a button to move selected items between the lists, simply add the following:

$("#buttonId").click(function (e) {
  $("select").moveToList("#sourceListId", "#destinationListId");
  e.preventDefault();
});

Scenario 2: You want to remove one or more items from a list

$('#buttonId').click(function (e) {
  $('select').removeSelected('#sourceListId');
  e.preventDefault();
});

Scenario 3: You want to move selected items up in a list

$('#buttonId').click(function (e) {
  $('select').moveUpDown('#sourceListId', true, false);
  e.preventDefault();
});

Scenario 4: You want to move selected items down in a list

$('#buttonId').click(function (e) {
  $('select').moveUpDown('#sourceListId', false, true);
  e.preventDefault();
});

Demo

I have included an Example folder in the jquery.selectlistactions.js GitHub repository that is styled with Bootstrap and some custom CSS.

The examples included are responsive and will look good in desktop as well as mobile.

Also, you can take a quick look at the JSFiddle

---

Consider giving back by getting me a coffee (or a couple) by clicking the following button:

[bottomads][/bottomads]