 |
|||||||||
|
|||||||||
|
|
ASP.Net makes things easy, like adding and removing items from an HTML listbox. The problem is that these items are stored as inner nodes... it's not just as simple as setting a value property. Therefore you modify items by modifying the DOM itself. Here's an Html page to do that. It gives each item a description and id (for lookup purposes). The methods that really matter (i.e. reuse them into your own code) are AddItem and RemoveItem. Both take a listBox object, and id, and AddItem also takes the text to display.
Note that in pure html, both the ListBox and Dropdown are created from the <select> tag. However a ListBox has a size attribute > 1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
<!--
function DoAdd()
{
var strText = document.getElementById("TxtContent").value;
var strId = document.getElementById("TxtId").value;
AddItem(document.getElementById("Select1"), strText, strId);
}
function DoRemove()
{
var strId = document.getElementById("TxtId").value;
RemoveItem(document.getElementById("Select1"), strId);
}
function AddItem(objListBox, strText, strId)
{
var newOpt;
newOpt = document.createElement("OPTION");
newOpt = new Option(strText,strText);
newOpt.id = strId;
objListBox.add(newOpt);
}
function RemoveItem(objListBox, strId)
{
var intIndex = GetItemIndex(objListBox, strId);
if (intIndex != -1)
objListBox.remove(intIndex);
}
function GetItemIndex(objListBox, strId)
{
for (var i = 0; i < objListBox.children.length; i++)
{
var strCurrentValueId = objListBox.children[i].id;
if (strId == strCurrentValueId)
{
return i;
}
}
return -1;
}
//-->
</script>
</head>
<body MS_POSITIONING="FlowLayout">
<form id="Form1" method="post" runat="server">
<P>ID: <INPUT id="TxtId" type="text" name="Text1" runat="server" value="1234"> Text: <INPUT id="TxtContent" type="text" name="Text1" runat="server" value="ddddd"></P>
<P><INPUT type="button" value="Add" onclick="DoAdd()" ID="Button1" NAME="Button1"> <INPUT type="button" value="Remove" onclick="DoRemove()" ID="Button2" NAME="Button2"> </P>
<P><SELECT id="Select1" size="8" name="Select1" runat="server" style="WIDTH: 176px; HEIGHT: 128px">
<OPTION id="a1">aaa</OPTION>
<OPTION id="b1">bbb</OPTION>
<OPTION id="c1">ccc</OPTION>
</SELECT></P>
</form>
</body>
</html>
Excellent note.
In AddItem(...) method, do we realy need to set option ID?
Great ,
NICE..
Doesn't seem to work on Firefox (altough it works fine on IE and Safari)
