aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Thursday, July 21, 2011 Total Views:  

Here’s a very simple script when button will be clicked then we will get value of the seleted item from DropDownList and value will display in the label without page post back.

Let us assume you have an DropDownList values as shown below.


<asp:DropDownList ID="DropDownList1" runat="server">

            <asp:ListItem Value="0">SELECT</asp:ListItem>

            <asp:ListItem Value="1">APPLE</asp:ListItem>

            <asp:ListItem Value="2">BANANA</asp:ListItem>

            <asp:ListItem Value="3">ORANGE</asp:ListItem>

            <asp:ListItem Value="4">MANGO</asp:ListItem>

        </asp:DropDownList>

 

 

Following jQuery code will get value of selected item from above ASP.NET DropDownList Control.

 

$("#<%=Label1.ClientID %>").text("Selected value: " +
                   $("#<%=DropDownList1.ClientID %> option:selected").val());

 

I have added Microsoft CDN hosted jQuery libarary as shown below.

<script type="text/javascript"
        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>

 

Here’s an example

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>How to get selected item value from ASP.NET DropdownList using jQuery | aspxtutorial.com</title>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#btnClick").click(function () {

                $("#<%=Label1.ClientID %>").text("Selected value: " + $("#<%=DropDownList1.ClientID %> option:selected").val());

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <h1>

            How to get selected item value from ASP.NET DropdownList using jQuery</h1>

        <asp:DropDownList ID="DropDownList1" runat="server">

            <asp:ListItem Value="0">SELECT</asp:ListItem>

            <asp:ListItem Value="1">APPLE</asp:ListItem>

            <asp:ListItem Value="2">BANANA</asp:ListItem>

            <asp:ListItem Value="3">ORANGE</asp:ListItem>

            <asp:ListItem Value="4">MANGO</asp:ListItem>

        </asp:DropDownList>

        <input id="btnClick" type="button" value=" Click " />

        <asp:Label ID="Label1" runat="server"></asp:Label>

    </div>

    </form>

</body>

</html>

 

Output

Download

Get-DropDownList-jQuery-selected-Value.rar (1.11 kb)

See live demo

Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5