How do I resequence dropdown list controls like the NetFlix queue from the client side (Javascript)

Question

We have a series of drop down controls that determine the sort order of columns. The problem we are having is when the user selects a column as the 2nd column the other dropdown lists need to have their values changed so that there is only one "2nd".

1. Column A [1]
2. Column B [2]
3. Column C [3]
4. Column D [4]
5. Column E [5]

In the list above, when you change Column D to [2], Column B becomes [3], C becomes [4], etc. I can manage it on the server side but I was wondering if anybody had some clues how to do this on the client side with javascript.

Answer 1

Look at Javascript toolkits like Scriptaculous for client side reordering.

You add your elements as "Sortables" and code your own callbacks to execute when the items are dragged, then dropped -- such as sending an asynchronous request to the server to persist the new order.

Here is a full tutorial on creating sortable lists with Scriptaculous and PHP. For ASP, the client side code will be slightly different, but the process will be similar.

Answer 2

On a note on JavaScript frameworks; I highly recommend jQuery.