Moving data between two ListBoxes

<form method="get">             

      <select id="SelectLeft" multiple="multiple">

            <option value="1">Australia</option>

            <option value="2">New Zealand</option>

            <option value="3">Canada</option>

            <option value="4">USA</option>

            <option value="5">France</option>

      </select>

           

      <input id="MoveRight" type="button" value=" >> " />

      <input id="MoveLeft" type="button" value=" << " />

       

      <select id="SelectRight" multiple="multiple">          

      </select>

</form>

jQuery 1.3.2

Below is the code to move the selected items from each <select> element. 

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>   

    <script language="javascript" type="text/javascript">

        $(function() {

            $("#MoveRight,#MoveLeft").click(function(event) {

                var id = $(event.target).attr("id");

                var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";

                var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";

 

                var selectedItems = $(selectFrom + "option:selected");

                var output = [];               

                $.each(selectedItems, function(key, e) {                   

                  output.push('<option value="' + e.value + '">' + e.text + '</option>');

                                });

               

                $(moveTo).append(output.join(""));               

                selectedItems.remove();

            });

        });

    </script>

jQuery 1.4

 

In the new jQuery library, the team has introduced a new function called toArray. This retrieves all the DOM elements contained in the jQuery set, as an array. So here's the code below:

 

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

    <script language="javascript" type="text/javascript">

        $(function() {

            $("#MoveRight,#MoveLeft").click(function(event) {

                var id = $(event.target).attr("id");

                var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";

                var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";

 

                var selectedItems = $(selectFrom + " :selected").toArray();

                $(moveTo).append(selectedItems);

                selectedItems.remove;

            });

        });

    </script>