Shift Select option items using JQuery

Today we will build a simple functionality using JQuery, where you can shift items in listbox ( Multiple select box), in either of two list boxes or select boxes.
As we are building it using HTML, CSS and JQuery, you can use it in any of the web based programming language.
So let’s quickly start building this.

shift-select-items-using-jquery

Flow will be: we will take 2 Multiple select option boxes, then give them unique id in HTML. We will have couple of buttons to navigate list items,we will write javascript functions to clear, shift options in either boxes. Also we will enable or disable based upon the number of list items present in select option boxes.

so lets write the javascript and JQuery functions:

Now, let make the UI part with some HTML and CSS, here is HTML:

And the CSS:

The complete code will be as follows:

Leave a Reply

Your email address will not be published. Required fields are marked *