Again a small script that enables you to order items in a listbox or (html) optoin. Just include this script in your page:

function move(index,to,list) 

{

    var total = list.options.length-1;

    if (index == -1) return false;

    if (to == +1 && index == total) return false;

    if (to == -1 && index == 0) return false;

    var items = new Array;

    var values = new Array;

    for (i = total; i >= 0; i--) 

    {

        items[i] = list.options[i].text;

        values[i] = list.options[i].value;

    }

    for (i = total; i >= 0; i--) 

    {

        if (index == i) 

        {

            list.options[i + to] = new Option(items[i],values[i], 0, 1);

            list.options[i] = new Option(items[i + to], values[i + to]);

            i--;

        }

        else 

        {

            list.options[i] = new Option(items[i], values[i]);

        }

    }

    list.focus();

}

When you are using asp.Net you can set this script from the code behind like this:

btnUp.Attributes.Add("onclick", "move(" + lstOrder.ClientID + 

".selectedIndex, -1,"+lstOrder.ClientID+")");

btnDown.Attributes.Add("onclick", "move(" + lstOrder.ClientID + 

".selectedIndex,+1," + lstOrder.ClientID + ")");

You can now click on the up and down arrows to move an item in the list.

I had lots of help from this site: http://javascript.internet.com/forms/selection-order.html

As I told you before, I'm working on a ASP.Net program. Because of the minimal use, I decided to use plain javascript and no AJAX. Also for deployment issues. I have a simple scenario, 2 listboxes. When I add a value to one, it should disappear in the other. Here is the setup:

I add the javascript via the code behind to the asp:images. The code is called in the page load event. This is the code that does the trick:

StringBuilder script = new StringBuilder();        

script.Append("javascript:");        

script.AppendFormat("var ind = {0}.selectedIndex;", lstOut.ClientID);        

script.Append("if (ind>-1){");        

script.AppendFormat("var sel = {0}.value;", lstOut.ClientID);        

script.AppendFormat("var len = {0}.length;",lstIn.ClientID); 

script.AppendFormat("{0}.options[len] = new Option({1}.options[ind].text,sel);" 

, lstIn.ClientID, lstOut.ClientID);        

script.AppendFormat("{0}.options[ind] = null;", lstOut.ClientID);        

script.Append("}");        

btnRight.Attributes.Add("onclick", script.ToString());         

script = new StringBuilder();        

script.Append("javascript:");        

script.AppendFormat("var ind = {0}.selectedIndex;", lstIn.ClientID);        

script.Append("if (ind>-1){");        

script.AppendFormat("var sel = {0}.value;", lstIn.ClientID);        

script.AppendFormat("var len = {0}.length;",lstOut.ClientID); 

script.AppendFormat("{0}.options[len] = new Option({1}.options[ind].text,sel);" 

, lstOut.ClientID, lstIn.ClientID);        

script.AppendFormat("{0}.options[ind] = null;", lstIn.ClientID);        

script.Append("}");        

btnLeft.Attributes.Add("onclick", script.ToString()); 

This is the Javascript that is generated for the right arrow image:

var ind = ctl00_CPHMiddle_lstOut.selectedIndex;

if (ind>-1){var sel = ctl00_CPHMiddle_lstOut.value;

var len = ctl00_CPHMiddle_lstIn.length;

ctl00_CPHMiddle_lstIn.options[len] = new Option(ctl00_CPHMiddle_lstOut.options[ind].text,sel);

ctl00_CPHMiddle_lstOut.options[ind] = null;}

When the user is finished with the listboxes he presses a save button that gets all items out of the right listbox and writes them to the database. This is the second challenge, because you will notice that the Listbox loses the state after a postback. This problem can be solved with a hidden field and more javascript!

This code is placed on the page load, behind the code of the listboxes. This is executed before the postback occurs and it doesn't interfear with the asp event. 

script = new StringBuilder();

script.Append("javascript:");

script.AppendFormat("var len = {0}.length;var values='';", lstIn.ClientID);

script.Append("for (i = 0; i < len; i++){");

script.AppendFormat("values = values + {0}.options[i].text 

+'*'+{0}.options[i].value+'/';", lstIn.ClientID);

script.Append("}");

script.AppendFormat("{0}.value = values;",unitsIn.ClientID);

btnSave.Attributes.Add("onclick", script.ToString());

As you can see we place the text and the value in the values array, split up the text and value by a '*' and split up the items with '/'. When we want to extract the values in the event handler of the button, we use the string.split method. The code looks like this:

//Write all untis to the selected department.

List<CCUnit> units = new List<CCUnit>();

string [] strArrunitsIn = unitsIn.Value.Split('/');

foreach (string str in strArrunitsIn)

{

	if (!String.IsNullOrEmpty(str))

        {

        	string[] item = str.Split('*');

                CCUnit unit = new CCUnit();

                unit.Guid = item[1];

                unit.Description = item[0];

                units.Add(unit);

        }

}

//Update

You can ask questions or request the complete code be commenting or email.

If you are not so familiar with Ajax, or just not using it, it could be nice to know Javascripting.

I had to extract a value from a listbox and put it into a textbox, also I wanted to keep the selectedvalue somewhere.

This is how I did it:

ListBox1.Attributes.Add("onclick", "javascript:var w = " + ListBox1.ClientID + ".selectedIndex;

" + txtDepartment.ClientID + ".value = " + ListBox1.ClientID + ".options[w].text; 

" + selItem.ClientID + ".value=" + ListBox1.ClientID + ".value");

You can go even further, when you want a Text in the listbox and 2 values, you can use string concatination in Javascript. This is a little more complicated, but still easy programming. In the following code I get the values from the listbox, seperate them and set the selected item of a dropdown and the value of a hidden field! In .Net always use the clientID property, because the name of the field depends on where the field is on.

script = "javascript:arrres= " + ListBox1.ClientID + ".value.split('*');";

script += selItem.ClientID + ".value=arrres[0];";

script += drpUserRoles.ClientID + ".value = arrres[1];";

ListBox1.Attributes.Add("onclick", script);

I'm not using Ajax for this project, so maybe there will be some more javascript posts in the near future.

If you are not so familiar with Ajax, or just not using it, it could be nice to know javascipting.

I had to extract a value from a listbox and put it into a textbox, also I wanted to keep the selectedvalue somewhere.

This is how I did it:

ListBox1.Attributes.Add("onclick", "javascript:var w = " + ListBox1.ClientID + ".selectedIndex;

" + txtDepartment.ClientID + ".value = " + ListBox1.ClientID + ".options[w].text; 

" + selItem.ClientID + ".value=" + ListBox1.ClientID + ".value");

You can go even further, when you want a Text in the listbox and 2 values, you can use string concatination in javascript. This is a little more complicated, but still easy programming. In the following code I get the values from the listbox, seperate them and set the selected item of a dropdown and the value of a hidden field!

script = "javascript:arrres= " + ListBox1.ClientID + ".value.split('*');";

script += selItem.ClientID + ".value=arrres[0];";

script += drpUserRoles.ClientID + ".value = arrres[1];";

ListBox1.Attributes.Add("onclick", script);

I'm not using Ajax for this project, so maybe there will be some more javascript posts in the near future.