Using javascript for managing asp:ListBox, Add/Remove ListItem

Here is a wonderful tutorial about using javascript with "select" html control:

http://www.mredkj.com/tutorials/tutorial_mixed2b.html

There are also related javascript tutorials. Here is presented the javascript and html code for managing select control. The asp:ListBox is wrapped select control with additional functionality. There is no problem to use select control in your code instead this one. I personally prefer using asp:ListBox:


<asp:ListBox ID="lstItems" runat="server" DataSourceID="ODSItems" DataTextField="Name" DataValueField="Id" Width="170px"></asp:ListBox>

<asp:Button ID="btnAddItem" runat="server" Text=">" />


<br />

<asp:Button ID="btnRemoveItem" runat="server" Text="<" />
<asp:ListBox ID="SelectedItems" runat="server" Width="170px">
<asp:ListItem Value="all" Text="All"></asp:ListItem>
</asp:ListBox>

In the Page.Load Event you have to add the followed code:

btnAddItem.Attributes.Add("onclick", "javascript:moveOptions('" + lstItems.ClientID + "','" + SelectedItems.ClientID + "');return false;") btnRemoveItem.Attributes.Add("onclick", "javascript:moveOptions('" + SelectedItems.ClientID + "','" + lstItems.ClientID + "');return false;")

I have added additional functionality for one more option field: all items. And also this code is optimized for asp pages - see the client id-s handling. This is the new javascript code:


var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);

function addOption(theSel, theText, theValue)
{
var newOpt = new Option(theText, theValue);
var selLength = theSel.length;
theSel.options[selLength] = newOpt;


// Removing the option with all value
var selLength = theSel.length;
var i;
if (selLength>1) {
for(i=selLength-1; i>=0; i--)
{
if (theSel.options[i].value=="all"){
deleteOption(theSel, i);
}
}
}
}

function deleteOption(theSel, theIndex)
{


var selLength = theSel.length;
if(selLength>0)
{
theSel.options[theIndex] = null;
}



//adding all
if (theSel.length==0){
addOption(theSel, "Всички","all");
}

}

function moveOptions(theSelFromId, theSelToId)
{

theSelFrom=document.getElementById(theSelFromId);
theSelTo=document.getElementById(theSelToId);

var selLength = theSelFrom.length;
var selectedText = new Array();
var selectedValues = new Array();
var selectedCount = 0;

var i;

// Find the selected Options in reverse order
// and delete them from the 'from' Select.
for(i=selLength-1; i>=0; i--)
{
if(theSelFrom.options[i].selected)
{
if (theSelFrom.options[i].value=="all"){
return;
}
selectedText[selectedCount] = theSelFrom.options[i].text;
selectedValues[selectedCount] = theSelFrom.options[i].value;
deleteOption(theSelFrom, i);
selectedCount++;
}
}

// Add the selected text/values in reverse order.
// This will add the Options to the 'to' Select
// in the same order as they were in the 'from' Select.
for(i=selectedCount-1; i>=0; i--)
{
addOption(theSelTo, selectedText[i], selectedValues[i]);
}

if(NS4) history.go(0);
}