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

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.