Move option from one select box to another and vice versa
Paul Shan Sun Mar 09 2014
What is PairSelect.js?
PairSelect.js is a very light weight jQuery plugin to specially made only to communicate between two selectboxes in a html page. This works similar to the ‘Add Chanel’ feature of Google adsense. Or sometimes in forms we see the things like this.
Now it is easy to remove an option from a html select and append it to some other using the basic jQuery functions like .remove() and .append(). But the problems comes when you want to remove few options from the second html select and add them back to the first select. In that case it will remove the option nicely from the second select but will not add it back exacxtlhy at the position it was previously. So this is problem will be solved very nicely if you use PairSelect.js
You add two html select and two button or something like that to perform the add and remove. Your option generally has the value attribute unique. But even if you have some other attribute which is having unique values that is also fine.
First of all you have to call the .pairMaster() function to set everything up. $(yourMainSelectboxSelector). pairMaster() is the syntax.
Then you have to Call the .addSelected() and .removeSelected() function on your add and remove button click. The syntax is $(yourMainSelectboxSelector).addSelected(yourSecondarySelectboxselector); for add, and $(yourSecondarySelectboxselector).removeSelected(yourMainSelectboxSelector); for remove.