Michael Sync

Adding and Removing Listitem from ListBox

6 Jul, 2006 JavaScript

<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<meta name=”GENERATOR” content=”Microsoft FrontPage 6.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<title>New Page 1</title>
<script language=”javascript”>
window.onload = function(){
//var strCook = document.cookie;

}
function loadStates(){
var oLst1 = document.getElementById(”Select1″);
var oLst2 = document.getElementById(”Select2″);

if(document.cookie != “” && document.cookie != oLst1.selectedIndex){
lbl.style.visibility=”visible”;
txt.style.visibility=”visible”;

}
else{
lbl.style.visibility=”hidden”;
txt.style.visibility=”hidden”;
document.cookie = oLst1.selectedIndex;
}

RemoveAll(oLst2);
switch(oLst1.selectedIndex){
case 0: //Myanmar
AddItem(oLst2, “AAA”, “a”);
AddItem(oLst2, “BBB”, “a”);
break;
case 1: //India
AddItem(oLst2, “UP”, “up”);
AddItem(oLst2, “BB”, “b”);
break;
case 2: //US
AddItem(oLst2, “NK”, “nk”);
AddItem(oLst2, “CA”, “ca”);
break;
case 3: //UK
AddItem(oLst2, “LD”, “ld”);
AddItem(oLst2, “CK”, “ck”);
break;

}
}
function RemoveAll(objListBox){
for(var i=objListBox.children.length-1;i>=0;i–)
objListBox.remove(i);
}
function AddItem(objListBox, strText, strId){
var newOpt;
newOpt = document.createElement(”OPTION”);
newOpt = new Option(strText,strText);
newOpt.id = strId;
objListBox.add(newOpt);
}
</script>
</head>

<body>
<SELECT id=”Select1″ name=”Select1″ size=”3″ runat=”server” style=”width: 168; height: 104″ onclick=”loadStates();”>
<OPTION>Myanmar</OPTION>
<OPTION>India</OPTION>
<OPTION>US</OPTION>
<OPTION>UK</OPTION>
</SELECT>               
<SELECT id=”Select2″ name=”Select2″ size=”3″ runat=”server” style=”width: 168; height: 106″>
</SELECT>
<p>
<div id=”lbl” style=”visibility:hidden”>ENTER STATE</div>
<input id=”txt” type=text style=”visibility:hidden”></input>
</body>
</html>

Please let me know if this script is not working on ur side.
Thanks.

2 Comments so far »

Anil said

am October 12 2006 @ 8:06 pm

Hi,

How do we dynamically add listitems to CheckBoxList server control in ASP.NET 2.0 on client side using JavaScript.
I heard that this scenario would be totally different than that of ListBox server control.

Please help me

Regards
Anil
Michael Sync said

am October 13 2006 @ 3:44 am

When the page is loaded, ASP.NET Enginee will parse a HTML Table for this
CheckBoxList.

eg:

CheckBoxList ( In Design View )

<asp:CheckBoxList ID=”CheckBoxList1″ runat=”server” DataMember=”DefaultView”
DataSourceID=”SqlDataSource1″

DataTextField=”Title” DataValueField=”ArticleID” Height=”150px”
Width=”255px”>

<asp:ListItem></asp:ListItem>

<asp:ListItem></asp:ListItem>

<asp:ListItem></asp:ListItem>

<asp:ListItem></asp:ListItem>

<asp:ListItem></asp:ListItem>

</asp:CheckBoxList><asp:SqlDataSource ID=”SqlDataSource1″ runat=”server”
ConnectionString=”<%$ ConnectionStrings:SyncConnectionString %>”

SelectCommand=”SELECT * FROM [Articles]“></asp:SqlDataSource>

</div>

You will see the following when you check the “View Source”

<table id=”CheckBoxList1″ border=”0″ style=”height:150px;width:255px;”>

<tr>

<td><input id=”CheckBoxList1_0″ type=”checkbox” name=”CheckBoxList1$0″ /><label for=”CheckBoxList1_0″>Why ASP.NET is Neat!</label></td>

</tr><tr>

<td><input id=”CheckBoxList1_1″ type=”checkbox” name=”CheckBoxList1$1″ /><label for=”CheckBoxList1_1″>To ASP.NET or Not to ASP.NET?</label></td>

</tr><tr>

<td><input id=”CheckBoxList1_2″ type=”checkbox” name=”CheckBoxList1$2″ /><label for=”CheckBoxList1_2″>ASP.NET Manifesto</label></td>

</tr><tr>
<td><input id=”CheckBoxList1_3″ type=”checkbox” name=”CheckBoxList1$3″ /><label for=”CheckBoxList1_3″>Critique of Modern ASP.NET</label></td>

</tr><tr>

<td><input id=”CheckBoxList1_4″ type=”checkbox” name=”CheckBoxList1$4″ /><label for=”CheckBoxList1_4″>The ASP.NET Club</label></td>

</tr><tr>

<td><input id=”CheckBoxList1_5″ type=”checkbox” name=”CheckBoxList1$5″ /><label for=”CheckBoxList1_5″>All Quiet on the ASP.NET Front</label></td>

</tr><tr>

<td><input id=”CheckBoxList1_6″ type=”checkbox” name=”CheckBoxList1$6″ /><label for=”CheckBoxList1_6″>Happy ASP.NET</label></td>
</tr>

</table>

So, what you can do is that you can simply append/insert the new row (listitem)
on Clientsite by using Javascript..

Here is one sample for adding new row to HTML Table.

Adding new row to the existing table - JavaScript

Hopefully, it would help..