Working with dual listbox and jquery

I have a set of listboxes that I move items from one to the other. I want to grab all the values from the second listbox "Listbox2" and store the values in a hidden field for postback to the database. I'm getting an error in this line of code saying Options is null.

arr[i] = $("#ListBox2").options[i].value;

Open in new window


Here is my complete code. What am I doing wrong?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
     <script type="text/javascript">
         $(function() {


             $("#MoveRight,#MoveLeft").click(function (event) {
                 var id = $(event.target).attr("id");
                 var selectFrom = id == "MoveRight" ? "#ListBox1" : "#ListBox2";
                 var moveTo = id == "MoveRight" ? "#ListBox2" : "#ListBox1";

                 var selectedItems = $(selectFrom + " :selected").toArray();
                 $(moveTo).append(selectedItems);                 
                 selectedItems.remove;
                 var arr = [];
                 for (var i = 0; i < $("#ListBox2").length; i++) {
                     arr[i] = $("#ListBox2").options[i].value;
                 }
                 $("#hf1").val(arr.join(','));
             });
         });
    </script>
    
</head>
    <body>
<form runat="server">

    <asp:ListBox ID="ListBox1" runat="server" Height="300px" SelectionMode="Multiple">
    </asp:ListBox>
           
      <input id="MoveRight" type="button" value=" >> " />
      <input id="MoveLeft" type="button" value=" << " />
       
      <asp:ListBox ID="ListBox2" runat="server" Height="300px" SelectionMode="Multiple"></asp:ListBox>  <asp:HiddenField ID="hf1" runat="server" />    
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
    </form>
</body>
</html>

Open in new window

NickMalloyAsked:
Who is Participating?
 
MrunalConnect With a Mentor Commented:
Here is your solution:

http://jsfiddle.net/mycbz/3/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.