Display Text and Value of selected DropDownlist item using jQuery

Sapna
12y
83.8k
0
0

Article

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.

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>