Move List Items Up and Down Using jQuery in ASP.Net ListBox control

Sometimes, we require moving/scrolling the list items in the ListBox control up and down to sort manually. This little code snippet will help us to do that using jQuery library.

Download the latest jQuery library from jQuery.com and integrate into your project. Read the following Faq's to integrate jQuery library to your project.

<script src="scripts/jquery-1[1].3.2.js" type="text/javascript"></script>

     <script type="text/javascript">

         function MoveDown() {

             var selectedOption = $('#ListBox1 > option[selected]');

             var nextOption = $('#ListBox1 > option[selected]').next("option");           

             if ($(nextOption).text() != "") {             

                 $(selectedOption).remove();

                 $(nextOption).after($(selectedOption));

             }                

         }

         function MoveUp() {

             var selectedOption = $('#ListBox1 > option[selected]');

             var prevOption = $('#ListBox1 > option[selected]').prev("option");            

             if ($(prevOption).text() != "") {

                 $(selectedOption).remove();

                 $(prevOption).before($(selectedOption));

             }

           }

    </script> 

<form id="form1" runat="server">

    <div>

    <table>

  <tr>

    <td rowspan=2>     

      <asp:ListBox ID="ListBox1" runat="server" Rows="10">

          <asp:ListItem>1</asp:ListItem>

          <asp:ListItem>2</asp:ListItem>

          <asp:ListItem>3</asp:ListItem>

          <asp:ListItem>4</asp:ListItem>

          <asp:ListItem>5</asp:ListItem>

          <asp:ListItem>6</asp:ListItem>

        </asp:ListBox>

    </td>

    <td><input type="button" value="Up" onclick="MoveUp()"></td>

  </tr>

  <tr>

    <td><input type="button" value="Down" onclick="MoveDown()"></td>

  </tr>

</table>

    </div>

    </form>

You need to access the ListBox using <%=ListBox1.ClientID%> in jQuery if in case your ListBox control is in a page that has MasterPage.

Execute the page and see it in action! Select an item, and click Up and Down button to move the selected item up and down.

Happy Coding!!