AspnetO

We code, that works!

  • Home
  • Asp.net
  • MVC
  • Interview Questions

Get Selected Text Value from DropDownList in Asp.net jQuery

By: Mayank Modi | Folls In: Asp.net | Last Updated: Nov 04, 2019

In my previous tutorials, I’d explained get selected value or text of asp.net dropdownlist using javascript, get and set asp.net textbox value using jquery, how to split string date into day month and year from code-behind, validate dropdownlist using javascript and other more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.

Now here in this tutorial, I’ll explain how you can get dropdown list selected text value from client-side and display selected text in asp.net label using jQuery.

First we need to give reference of jQuery under head section. You can simply use below line in head section of your .aspx page.

jQuery Reference

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

To get selected text value from dropdown or asp.net dropdownlist using jQuery, we need to bind the change event on document.ready function of jQuery.

jQuery Function To Get DropDownList Text Value

Following is the jQuery code that will return the selected value or text from the dropdownlist with validation:

<script type="text/javascript">
       $(document).ready(function () {
               //We are binding onchange event using jQuery built-in change event
               $('#ddlSubject').change(function () {
                       //get selected value and check if subject is selected else show alert box
                       var SelectedValue = $("#ddlSubject").val();
                       if (SelectedValue > 0) {
                               //get selected text and set to label
                               var SelectedText = $("#ddlSubject option:selected").text();
                               lblSelectedText.innerHTML = SelectedText;

                               //set selected value to label
                               lblSelectedValue.innerHTML = SelectedValue;
                       } else {
                               //reset label values and show alert
                               lblSelectedText.innerHTML = "";
                               lblSelectedValue.innerHTML = "";
                               alert("Please select valid subject.");
                       }
               });
       });
</script>

As you can see that I’ve bind jQuery built-in change event on document.ready because we need to bind onchange event before using it. Your final code looks like as below:

You may also like, how to set asp.net dropdownlist selected value using javascript or jquery here.

HTML Markup – [.aspx]

Following is the complete HTML Markup code for .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
       <title>Get DropDownList Value or Text using jQuery</title>
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
       </script>
       <script type="text/javascript">
               $(document).ready(function () {
                       //We are binding onchange event using jQuery built-in change event
                       $('#ddlSubject').change(function () {
                               //get selected value and check if subject is selected else show alert box
                               var SelectedValue = $("#ddlSubject").val();
                               if (SelectedValue > 0) {
                                       //get selected text and set to label
                                       var SelectedText = $("#ddlSubject option:selected").text();
                                       lblSelectedText.innerHTML = SelectedText;

                                       //set selected value to label
                                       lblSelectedValue.innerHTML = SelectedValue;
                               } else {
                                       //reset label values and show alert
                                       lblSelectedText.innerHTML = "";
                                       lblSelectedValue.innerHTML = "";
                                       alert("Please select valid subject.");
                               }
                       });
               });
       </script>
</head>
<body>
       <form id="form1" runat="server">
       <div>
               <table>
                       <tr>
                               <td>Select any Subject</td>
                               <td>:</td>
                               <td>
                               <asp:DropDownList ID="ddlSubject" runat="server" ClientIDMode="Static">
                                       <asp:ListItem Value="0" Text="Please select" />
                                       <asp:ListItem Value="1" Text="HTML" />
                                       <asp:ListItem Value="2" Text="CSS" />
                                       <asp:ListItem Value="3" Text="JavaScript" />
                                       <asp:ListItem Value="4" Text="jQuery" />
                                       <asp:ListItem Value="5" Text="Asp.net" />
                                       <asp:ListItem Value="6" Text="PHP" />
                                       <asp:ListItem Value="7" Text="Android" />
                               </asp:DropDownList>
                               </td>
                       </tr>
                       <tr>
                               <td colspan="3">&nbsp;&nbsp;</td>
                       </tr>
                       <tr>
                               <td>You have selected(Text)</td>
                               <td>:</td>
                               <td>
                                       <asp:Label ID="lblSelectedText" runat="server" ClientIDMode="Static">
                                       </asp:Label>
                               </td>
                       </tr>
                       <tr>
                               <td colspan="3">&nbsp;&nbsp;</td>
                       </tr>
                       <tr>
                               <td>You have selected(Value)</td>
                               <td>:</td>
                               <td>
                                       <asp:Label ID="lblSelectedValue" runat="server" ClientIDMode="Static">
                                       </asp:Label>
                               </td>
                       </tr>
               </table>
       </div>
       </form>
</body>
</html>

Example Result

Get selected text value from dropdown in asp.net jquery

Download Example

Icon

Dropdownlist get value or text using JavaScript/jQuery Sample Code

1 file(s)   16.77 KB
Download This Example

Git Repo

git clone https://github.com/immayankmodi/dropdown-list-get-value-text-client-side-jquery-javascript.git

Signup Today And Get Latest Tutorials For Free!

Subscribe to us and get free latest tutorials notifications whenever we publish a new contents.

About Mayank Modi

Mayank is a web developer and designer who specializes in back-end as well as front-end development. He's a Founder & Chief Editor of AspnetO. If you'd like to connect with him, follow him on Twitter as @immayankmodi.

Share Your Comments & Feedback Cancel reply

Note: To post any code in comment, use <pre>your code</pre>

Social Connections

  • 0 Fans
  • 3,222 Followers
  • 21 Followers
  • 52 Followers
  • 1,559 Subscribers

Top Posts

  • CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
  • Top 10 OOPS Concepts In C# .NET With Examples
  • Parser Error While Deploying Website to Server in Asp.net
  • Asp.net TextBox: How to Get Set TextBox Value or Text in jQuery
  • How to Print Asp.net GridView Data on Button Click using Javascript?

Find by Tags

Ado.net Ajax appSettings Asp.net C# CheckBox CheckBoxList ConnectionStrings Control CSS CSS3 Difference Download DropDownList Export Facebook fadeIn fadeOut fadeTo fadeToggle File File Extension FileUpload Function GridView IIS Interview Questions JavaScript jQuery MVC OOP RadioButtonList RDP Repeater Send Mail Solutions Split SQL Stored Procedure TextBox Upload Validation VB Web.config Web Hosting

The Man Behind AspnetO

Mayank Modi

Hi there,

Myself Mayank Modi, a Full Stack Developer (.NET Stack) and a blogger from Surat, India.

I'm welcoming you to my blog - AspnetO, a programmers community blog where we code, that works!

I started AspnetO as a hobby and now we're growing day by day. We're now having 5000+ programmers that get benefits and learn new things about website design and development under our community blog.

Here at AspnetO, I write about Beginners to Advance level of tutorials on programming languages like Asp.net using C# and Vb.net, MVC, SQL Server, JavaScript, jQuery etc. In sort, all about .NET Framework and website development stuff and sometimes sharing tips and tricks that can help you to grow up your programming skills.

You can get more details about me and my blog at About us page.

Subscribe To Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts right to your inbox

Join 1000+ other subscribers

Hot on AspnetO

Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 7245 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6211 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6207 downloads 39.76 KB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 3056 downloads 1.01 MB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2993 downloads 1.01 MB
Download This Example

Copyright © 2014 - 2019 · All Rights Reserved.replica cartier watches

About | Copyrights | Privacy | Terms | Contact | Advertise | Sitemap
Previous CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
Next Asp.net TextBox: How to Get Set TextBox Value or Text in JavaScript