How to access all property of List box using JavaScript function.
Step 1 : First create your website in asp.net and create one
.aspx page .
Step2: Open .aspx page and drag and drop ListBox contol
<asp:ListBox ID="lbScriptAccess" runat="server" Height="200px" Width="350px"></asp:ListBox>
Step 3:Add asp:button on page to access all property
<asp:Button ID="Button1" runat="server" Text="Add Item" OnClientClick="return AddItem();" />
<asp:Button ID="Button2" runat="server" Text="Delete Selected
Item" OnClientClick="return DeleteItem();" />
<asp:Button ID="Button3" runat="server" Text="Delete All Item" OnClientClick="return DeleteAllItem();" />
<asp:Button ID="Button4" runat="server" Text="Selected Index
Position" OnClientClick="return
IndexPosition();" />
<asp:Button ID="Button5" runat="server" Text="Selected Value" OnClientClick="return SelectedValue();" />
Step 4: Add
javscript function to access all asp:button client script to handle script.
<script type="text/javascript">
function AddItem() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
var option1 = document.createElement("option");
option1.text = "Value" +
list.length;
option1.value = list.length;
list.options.add(option1);
return false;
}
function DeleteItem() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
alert(list.options[list.selectedIndex].text + " is deleted successfully");
list.remove(list.selectedIndex);
return false;
}
function DeleteAllItem() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
list.length = 0;
alert("All item Deleted from list");
return false;
}
function IndexPosition() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
alert("Selecetd position : " + list.selectedIndex);
return false;
}
function SelectedValue() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
alert("Selected value is : " + list.options[list.selectedIndex].text);
return false;
}
</script>
Step 5: Just run your page and check is your code is
running perfectly or not and access all transaction of listbox control.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaListControl.aspx.cs"
Inherits="JavaListControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>List Box Example</title>
<script type="text/javascript">
function AddItem() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
var option1 = document.createElement("option");
option1.text = "Value" +
list.length;
option1.value = list.length;
list.options.add(option1);
return false;
}
function DeleteItem() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
alert(list.options[list.selectedIndex].text + " is deleted successfully");
list.remove(list.selectedIndex);
return false;
}
function DeleteAllItem() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
list.length = 0;
alert("All item Deleted from list");
return false;
}
function IndexPosition() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
alert("Selecetd position : " + list.selectedIndex);
return false;
}
function SelectedValue() {
var list = document.getElementById("<%= lbScriptAccess.ClientID %>");
alert("Selected value is : " + list.options[list.selectedIndex].text);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<asp:ListBox ID="lbScriptAccess" runat="server" Height="200px" Width="350px"></asp:ListBox>
<br />
<br /><br />
<asp:Button ID="Button1" runat="server" Text="Add Item" OnClientClick="return AddItem();" />
<asp:Button ID="Button2" runat="server" Text="Delete Selected
Item" OnClientClick="return DeleteItem();" />
<asp:Button ID="Button3" runat="server" Text="Delete All Item" OnClientClick="return DeleteAllItem();" />
<asp:Button ID="Button4" runat="server" Text="Selected Index
Position" OnClientClick="return
IndexPosition();" />
<asp:Button ID="Button5" runat="server" Text="Selected Value" OnClientClick="return SelectedValue();" />
</form>
</body>
</html>
No comments:
Post a Comment
Thank you for your interest .