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>
</select>

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

<select id="PairedSelectBox" multiple>
</select>

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(){

	$('#MasterSelectBox').pairMaster();
	$('#btnAdd').click(function(){
		$('#MasterSelectBox').addSelected('#PairedSelectBox');
	});
	$('#btnRemove').click(function(){
		$('#PairedSelectBox').removeSelected('#MasterSelectBox');
	});
});

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


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

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

  • Yaxita

    Hello,

    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

    hello,
    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 ”
    error