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

Html file

<select id="MasterSelectBox" multiple>
    <option value="First">First value</option>
    <option value="Second">Second value</option>
    <option value="Third">Third value</option>
    <option value="Fourth">Fourth value</option>
    <option value="Fifth">Fifth value</option>

<button id="btnAdd">></button><br>
<button id="btnRemove"><</button>

<select id="PairedSelectBox" multiple>

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.

Your JS

$(document).ready( function(){


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.

Demo and Source code

Fork on GitHub:  https://github.com/metalshan/pair-select

live-demo-button download-button