Move option from one select box to another and vice versa

author-avatar
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

Html file

[code language="html"]
[/code] 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

[code language="javascript"] $(document).ready( function(){ $('#MasterSelectBox').pairMaster(); $('#btnAdd').click(function(){ $('#MasterSelectBox').addSelected('#PairedSelectBox'); }); $('#btnRemove').click(function(){ $('#PairedSelectBox').removeSelected('#MasterSelectBox'); }); }); [/code] 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
VC Productpluginjquery

Written By

Paul Shan

Collections

  • E

    ES6

  • R

    React JS

  • C

    CSS

    Cascading style sheets only

  • S

    SEO

    Search engine optimization

  • E

    ES7

  • C

    CMS

    wordpress, drupal, jumla, magento and more


Show All

Tags

vue-js
advanced js
youtube
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
imorph

Show All