Move option from one select box to another and vice versa

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:

live-demo-button download-button

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Yaxita


    This is nice article .. It fulfills all my requirements but i am facing one issue.

    In the second drop down the right one i adding options from database. So If i select send option from left to right and then right to left then it works properly but when only send data back from right to left then it is not working..

    Can you please help me? your help will save my time.

    • metalshan

      You can modify the functions “bringBackElement” and “removeSelected”, so that if it didn’t find a previous element, append that to the bottom.
      Thus, if you remove the selected elements (which actually came from db) will be appended at the bottom of the master list. Is this what you want?

  • garima

    This plugin is working fine with adding elements but I m facing a issue when removing it and adding back to master list.

    my master list has optgroups and when I remove it from paired list then it goes to the correct index back but not takes specific optgroup in acount.

    Please help

  • Razan

    Not working..
    it returns
    ” $(…).pairMaster() is not a function ”

  • Miran Staric

    Helo. is it posible to store data in mysql databese when move from left to right?

    • Paul Shan

      Fire an ajax call in each interaction (click on the buttons) and store things in db from server.