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

By
Advertisement
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.

4 comments:

  1. I like this! Thank you.

    "Move all" buttons would be nice too.

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

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

    ReplyDelete
  4. Thanks For the code Perfectly working

    ReplyDelete

Online Casino