Display Text and Value of selected DropDownlist item using jQuery

Introduction: In this article we will explore how to display the selected value using jQuery. Further in details we will talk about how to display the text and value of the selected DropDownList item using jQuery. We will use some CSS properties which will be supported by new version of Firefox. If you have a older version then it will not run so get the latest version of Firefox and run the application. For implementing such type of functionality you have to follow the steps given below:

Step 1: Firstly you have to create a web site let see how you will do it:

  • Go to visual studio 2010
  • New-> Select a website application
  • Click OK


Step 2: Secondly you have to add a new page to the website

  • Go to the Solution Explorer
  • Right Click on the Project name
  • Select add new item
  • Add new web page and give it a name
  • Click OK



Step 3: Now you have to drag and drop the DropDownList from the ASP.NET toolbox 


Step 4: In this step we will write the CSS code which will we write inside the <style></style> tag and you should have to placed it inside the head section let see the code given below:


Step 5: In this step we will see that from where you have to add the script reference between<script></script> inside the head section which is given in the figure below:


Step 6: In this step we will see that the script code which is looks like given below:


Step 7: In this step we will write the jQuery code which will display text and value of selected item given below:


Step 8: In this step you will have to write the complete code for the Default2.aspx page.


@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Display Selected Value and Text From ASP.NET DropDownList</title> 
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('select[id$=Drop_down]').bind("change keyup", function () {
                "Value: " + $(this).val() +
                "<br />" +
                " Text: " + $('select[id$=Drop_down] :selected').text());
<style type="text/css">
        border:5px groove #800000;
-moz-linear-gradient(top, rgba(30,87,153,0) 0%,
      rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%,
      rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%,
      rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%,
      rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%)
    <form id="form1" runat="server">
    <div class="div1" style="border: 5px groove #993333">
        <h2 style="border: 5px groove #99FF33; font-family: 'Comic Sans MS'; font-size: xx-large; color: #000000; background-color: #993366">
Display the dropdownlist selected
            item: text and value using jQuery </h2>
        <asp:DropDownList ID="Drop_down" runat="server" BackColor="#CCFFFF" CssClass="Drop_down"
            Font-Names="Comic Sans MS" Font-Size="X-Large" ForeColor="#660033"
            Height="67px" Width="278px" >
            <asp:ListItem Text="Choose a month" Value="" />
            <asp:ListItem Text="January" Value="Hiiii It's January"></asp:ListItem>
            <asp:ListItem Text="February" Value="Hiiii It's February"></asp:ListItem>
            <asp:ListItem Text="March" Value="Hiiii It's March"></asp:ListItem>
            <asp:ListItem Text="April" Value="Hiiii It's April"></asp:ListItem>
            <asp:ListItem Text="May" Value="Hiiii It's May"></asp:ListItem>
            <asp:ListItem Text="June" Value="Hiiii It's June"></asp:ListItem>
            <asp:ListItem Text="July" Value="Hiiii It's July"></asp:ListItem>
            <asp:ListItem Text="August" Value="Hiiii It's August"></asp:ListItem>
            <asp:ListItem Text="September" Value="Hiiii It's September"></asp:ListItem>
            <asp:ListItem Text="October" Value="Hiiii It's October"></asp:ListItem>
            <asp:ListItem Text="November" Value="Hiiii It's November"></asp:ListItem>
            <asp:ListItem Text="December" Value="Hiiii It's December"></asp:ListItem> 
        <br /><br />
        <p id="p1"
            style="border: 5px groove #99CCFF; font-family: 'Comic Sans MS'; font-size: xx-large; color: #FFFF00; background-color: #800000"></p> 

Step 9: In this step we will see the design of the Default2.aspx page which is given below:


Step 10: At last we are going to run the Default2.aspx page by pressing F5 and the related output is given below:

Output1: This output shows by default whenever we will run the Default2.aspx page:


Output2: This Output shows that whenever we choose any month from the DropDownList then it's text and value will be shown below:


Output3: This Output shows that whenever we choose any month from the DropDownList then it's text and value will be shown below again and again:


Up Next
    Ebook Download
    View all
    View all