Tuesday, September 21, 2010

Jquery to get SelectedValue SelectedIndex SelectedText of a DropdownList in Asp.net




Please visit my new Web Site WWW.Codedisplay.com



When you bind a DropdownList by data sometimes it may require to do something in the client side using javascript or jquery. To read the same post using javascript click here. In this article i will show you how one can get DropdownList SelectedValue, SelectedText & SelectedIndex. So that you can now play with Asp.net DropdownList control. The output like below:

Drodwnlist jquery

An example of complete code is given below:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>How to get Selected value, Selected index & Selected text of a DropDownList</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
    
    
<script type="text/javascript">
        $(function () {
            $('select[id$=DropDownList1]').bind("change keyup", function () {
                $('#info').html(
                "<b>Selected Value:</b> " + $('#<%= DropDownList1.ClientID%>').val() +
                "<br />" +
                "<b>Selected Index:</b> " + $('#<%= DropDownList1.ClientID%>').get(0).selectedIndex +
                "<br />" +
                "<b>Selected Text:</b> " + $('select[id$=DropDownList1] :selected').text());
            });
        });
    </script>
        
</head>
<body>
    <form id="form1" runat="server">
    <div>
<h2>To display Selectedvalue, Selectedindex & Selectedtext please select an item from the DropDownList</h2>
        <asp:DropDownList ID="DropDownList1" runat="server" >
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>
            <asp:ListItem Text="Three" Value="3"></asp:ListItem>
            <asp:ListItem Text="Four" Value="4"></asp:ListItem>
            <asp:ListItem Text="Five" Value="5"></asp:ListItem>
        </asp:DropDownList>
        <hr /><br />
        <div id="info"></div>    </div>
    </form>
</body>
</html>

Code explanation:
The line $('#<%= DropDownList1.ClientID%>').val() will return you the selectedtext.
The line $('#<%= DropDownList1.ClientID%>').get(0).selectedIndex will return you the selectedindex
The line $('select[id$=DropDownList1] :selected').text()) will return you selectedtext.

Note:
Here i used two event change & keyup because the change event works in IE wheres keyup event works for Mozilla, Chrome and Safari.

Script Tested for the following browsers:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

3 comments:

Anonymous said...

can you please tell me , how you included the code snippets in your post. It is looking very nice.Can you just tel me the process.I am a new blogger and it will be very helpful if you share that thing.
Thanks a lot in advance
Kumar

Anonymous said...

good explanation and very helpful article

Unknown said...

Excellent! This helped me a lot with my code. Thanks!

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash