Post
Ask Question

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_1fig.gif

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

Step2-1fig.gif

Step_2_2fig.gif

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

Step_3fig.jpg

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_4fig.jpg

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_5fig.jpg

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

Step_6fig.jpg

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

Step_7fig.jpg

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

Code:
<%@ 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 () {
                $('#p1').html(
                "Value: " + $(this).val() +
                "<br />" +
                " Text: " + $('select[id$=Drop_down] :selected').text());
            });
        });
    </script>
 <style type="text/css">
    .Drop_down
    {
        border:5px groove #800000;
    }
    .div1
    {
     background: -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%);
    }
</style>
</head>
<body>
    <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> 
        </asp:DropDownList>
        <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> 
    </div>
    </form>
</body>
</html>

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

STep_9fig.jpg

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:

output1.jpg

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

Output2.jpg

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:

output3.jpg


Similar Articles