Adding and Removing Listitem from ListBox

<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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.

3 thoughts on “Adding and Removing Listitem from ListBox

  1. 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

  2. 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..

Leave a Reply

Your email address will not be published. Required fields are marked *