Wednesday, 29 May 2013

How to access server side dropdownlist using JavaScript in asp.net

How to access server side dropdownlist using JavaScript in asp.net




Step 1 : First create your website in asp.net and create one .aspx page .

Step2: Open .aspx page and drag and drop DropDownList Control

<asp:DropDownList ID="ddlScriptAccess" runat="server"></asp:DropDownList>

 Step 3:Add Asp:Button control on page to handle javascript

 
<asp:Button ID="Button1" runat="server" Text="Button"  
OnClientClick="return fillDropDown();" />


Step 4 : Add javascript function to fill dropdownlist
<script type="text/javascript">
        function fillDropDown() {
            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;
        }
    </script>

Step 5 : Just run your page and and click on asp:button  each and every click will add one record to drop down list and add text and value property.


//Code for entire page


<%@ 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 fillDropDown() {
            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;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        Drop Down :
        <asp:DropDownList ID="ddlScriptAccess" runat="server"></asp:DropDownList>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return   fillDropDown();" />
    </form>
</body>
</html>

No comments:

Post a Comment

Thank you for your interest .