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]()