How to access all property of Drop down list 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 DropDownList
contol.
<asp:DropDownList ID="ddlScriptAccess" runat="server"></asp:DropDownList>
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 dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
var option1 = document.createElement("option");
option1.text = "Value" +
dropDown.length;
option1.value = dropDown.length;
dropDown.options.add(option1);
return false;
}
function DeleteItem() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
alert(dropDown.options[dropDown.selectedIndex].text + " is deleted successfully");
dropDown.remove(dropDown.selectedIndex);
return false;
}
function DeleteAllItem() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
dropDown.length = 0;
alert("All item Deleted from dropdown");
return false;
}
function IndexPosition() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
alert("Selecetd position : " + dropDown.selectedIndex);
return false;
}
function SelectedValue() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
alert("Selected value is : " + dropDown.options[dropDown.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 drop down.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaDropDownControl.aspx.cs"
Inherits="JavaDropDownControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Drop Down Example</title>
<script type="text/javascript">
function AddItem() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
var option1 = document.createElement("option");
option1.text = "Value" +
dropDown.length;
option1.value = dropDown.length;
dropDown.options.add(option1);
return false;
}
function DeleteItem() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
alert(dropDown.options[dropDown.selectedIndex].text + " is deleted successfully");
dropDown.remove(dropDown.selectedIndex);
return false;
}
function DeleteAllItem() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
dropDown.length = 0;
alert("All item Deleted from dropdown");
return false;
}
function IndexPosition() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
alert("Selecetd position : " + dropDown.selectedIndex);
return false;
}
function SelectedValue() {
var dropDown = document.getElementById("<%= ddlScriptAccess.ClientID %>");
alert("Selected value is : " + dropDown.options[dropDown.selectedIndex].text);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
Drop Down :
<asp:DropDownList ID="ddlScriptAccess" runat="server"></asp:DropDownList>
<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 .