jQuery.SelectListActions.js Plugin To Move Items Between Two Select Lists, Remove Select List Items and Move Up and Down Select List Items

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





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





Esau Silva
Software Engineer at Region One ESC
Microsoft Full Stack Application Developer
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed.
Share