Skip to main content

Move items in drop down list from left to right using jQuery

By
Introduction:
In my previous article I have explained about  Add remove select and set items in select drop down list. In this article I am going to explain about how to move items from left side to write side using jQuery

Explanation:
For example in my form I have two dropdown lists one with id “allcities” and another one with id “selectedcities”. And I have two buttons one for moving item from left to right (btnleft) and another one is to move item from right to left (btnright). Below is the html code.

<div>
    <div style="float: left;">
        <select name="allcities" id="allcities" multiple="multiple" style="width: 100px;
            height: 130px;">
            <option value="1">Chennai</option>
            <option value="2">Mumbai</option>
            <option value="3">Kolkatta</option>
            <option value="4">Bangalore</option>
            <option value="5">Delhi</option>
        </select>
    </div>
    <div class="btn" style="float: left; padding-top: 20px;">
        <input id="btnleft" value=">>>>" type="button" />
        <br />
        <input id="btnright" value="<<<<" type="button" />
    </div>
    <div style="float: left;">
        <select name="selectedcities" id="selectedcities" multiple="multiple" style="width: 100px;
            height: 130px;">
        </select>
    </div>
</div>

Now  i have included the below jquery library into the page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

After that I have defined the functionality for two buttons in document.ready
Below is the code.

<script type="text/javascript">

    jQuery(document).ready(function () {
        jQuery("#btnleft").click(function () {
            jQuery("#allcities option:selected").each(function () {
                jQuery("#selectedcities").append(jQuery(this).clone());
                jQuery(this).remove();
            });
        });

        jQuery("#btnright").click(function () {
            jQuery("#selectedcities option:selected").each(function () {
                jQuery("#allcities").append(jQuery(this).clone());
                jQuery(this).remove();
            });
        });
    });
</script>

The above code will move items from left to right and vice versa.

Do you like this article? Help us to improve. Please post your comments below.
Labels:

Comments

  1. Anonymous2:54 am, January 25, 2013

    I like this! Thank you.

    "Move all" buttons would be nice too.

    ReplyDelete
  2. Varanasi1:06 pm, February 19, 2013

    Thanks ! It great. But need to enhance with All Items to Right & All Items to Left

    ReplyDelete
  3. Kannnadasan2:05 pm, February 19, 2013

    Hi Varanasi:- Will do in my next article..

    ReplyDelete
  4. Anonymous11:39 am, December 02, 2015

    Thanks For the code Perfectly working

    ReplyDelete

Post a Comment

Popular posts from this blog

Code To Convert rupees(numbers) into words using C#.Net

By
Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...
16 comments
Read More...

CHECK IF FUNCTION EXISTS EXAMPLE

By
http://css-tricks.com/snippets/javascript/check-if-function-exists-before-calling/ When using scripts that are shared between different areas of a site, there may be cases where a function is called that doesn't exist. It makes sense on one page (the dependency is there) but not another. The difference is too slight to warrant forking the file into different versions. Instead, you can just check if the function exists before calling it to avoid the error: if ( typeof yourFunctionName == 'function' ) { yourFunctionName ( ) ; } jQuery code snippet to check whether a function exists within the JavaScript code. This can be easily achieved by using the jQuery.isFunction() function. Useful for checking if a jQuery function exists before calling it! < script type = "text/javascript" >      function  somenoobfunction ( )   {      }         // using jQuery      if   ( $. isFunction ( wi...
Post a Comment
Read More...

C# Extension Methods Example

By
In this article i am going to explain about Extension Methods  with example. Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type. If you do implement extension methods for a given type, remember the following points: An extension method will never be called if it has the same signature as a method defined in the type. Extension methods are brought into scope at the namespace level. For example, if you have multiple static classes that contain extension methods in a single namespace named Extensions, they will all be brought into scope by the using Extensions; directive. ...
Post a Comment
Read More...