Introduction:
Here I will explain how to get dropdownlist selected value or selected item text using JQuery in asp.net.
Here I will explain how to get dropdownlist selected value or selected item text using JQuery in asp.net.
Description:
In previous articles I explained How to bind dropdownlist using JQuery and many articles relating to JQuery. Now I will explain how to get dropdownlist selected value using JQuery in asp.net.
In previous articles I explained How to bind dropdownlist using JQuery and many articles relating to JQuery. Now I will explain how to get dropdownlist selected value using JQuery in asp.net.
If we want to get dropdownlist
selected value or selected item text in JQuery we need to write the code like
as shown below
$(document).ready(function()
{
//Dropdownlist Selectedchange
event
$('#ddlCountry').change(function() {
// Get Dropdownlist seleted item
text
$("#lbltxt").text($("#ddlCountry option:selected").text());
// Get Dropdownlist selected item
value
$("#lblid").text($("#ddlCountry").val());
return false;
})
});
|
If you want check this code in sample first
design table in database and give name as Country as shown below
Data Type
|
Allow Nulls
|
|
CountryId
|
int(set
identity property=true)
|
No
|
CountryName
|
varchar(50)
|
Yes
|
After completion table design enter
some of Country details in database to work for our sample after that write the
following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Get Dropdownlist selected text or value using JQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "JQueryGetDropdownSelectedvalue.aspx/BindDatatoDropdown",
data: "{}",
dataType: "json",
success: function(data)
{
$.each(data.d, function(key,
value) {
$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
});
},
error: function(result)
{
alert("Error");
}
});
//Dropdownlist Selectedchange
event
$('#ddlCountry').change(function() {
// Get Dropdownlist seleted item
text
$("#lbltxt").text($("#ddlCountry option:selected").text());
// Get Dropdownlist selected item
value
$("#lblid").text($("#ddlCountry").val());
return false;
})
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<table>
<tr><td align="right">Select Country:</td>
<td><asp:DropDownList ID="ddlCountry"
runat="server"
/></td>
</tr>
<tr><td align="right">Selected Text:</td>
<td><b><label id="lbltxt"
/></b></td>
</tr>
<tr><td align="right">Selected text value:</td>
<td><b><label id="lblid"
/></b></td>
</tr>
</table>
</form>
</body>
</html>
|
If
you observe above code in header section I added script file link by using that
file we have a chance to interact with JQuery. If you want to know about script
function mentioned in header section check these posts JQuery AutoComplete textbox with database in asp.net and call asp.net page methods in JQuery.
Now
open code behind file and add following namespaces
using
System;
using
System.Collections.Generic;
using
System.Data;
using
System.Data.SqlClient;
using
System.Web.Services;
|
After
that write the following code
C#.NET
Code
protected
void Page_Load(object
sender, EventArgs e)
{
}
[WebMethod]
public
static CountryDetails[]
BindDatatoDropdown()
{
DataTable dt = new DataTable();
List<CountryDetails> details = new List<CountryDetails>();
using
(SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial
Catalog=MySampleDB;Integrated Security=true"))
{
using
(SqlCommand cmd = new
SqlCommand("SELECT
CountryID,CountryName FROM Country", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach
(DataRow dtrow in
dt.Rows)
{
CountryDetails country = new CountryDetails();
country.CountryId
= Convert.ToInt32(dtrow["CountryId"].ToString());
country.CountryName
= dtrow["CountryName"].ToString();
details.Add(country);
}
}
}
return
details.ToArray();
}
public
class CountryDetails
{
public
int CountryId { get;
set; }
public
string CountryName { get;
set; }
}
|
VB.NET
Code:
Imports
System.Collections.Generic
Imports
System.Data
Imports
System.Data.SqlClient
Imports
System.Web.Services
Partial
Class _Default
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(ByVal
sender As Object,
ByVal e As
EventArgs)
End
Sub
<WebMethod()>
_
Public
Shared Function
BindDatatoDropdown() As CountryDetails()
Dim
dt As New
DataTable()
Dim
details As New
List(Of CountryDetails)()
Using
con As New
SqlConnection("Data
Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
Using
cmd As New
SqlCommand("SELECT CountryID,CountryName
FROM Country", con)
con.Open()
Dim
da As New
SqlDataAdapter(cmd)
da.Fill(dt)
For
Each dtrow As
DataRow In dt.Rows
Dim
country As New
CountryDetails()
country.CountryId
= Convert.ToInt32(dtrow("CountryId").ToString())
country.CountryName
= dtrow("CountryName").ToString()
details.Add(country)
Next
End
Using
End
Using
Return
details.ToArray()
End
Function
Public
Class CountryDetails
Public
Property CountryId() As
Integer
Get
Return
m_CountryId
End
Get
Set(ByVal value As Integer)
m_CountryId
= Value
End
Set
End
Property
Private
m_CountryId As Integer
Public
Property CountryName() As String
Get
Return
m_CountryName
End
Get
Set(ByVal value As String)
m_CountryName
= Value
End
Set
End
Property
Private
m_CountryName As String
End
Class
End
Class
|
Demo
 |
Download
sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
6 comments :
good one
I try your way by using JQuery in asp.net and it's really helpful.
sir i m creating dropdown dynamically and bindinded it to the database but how to make default value --Select-- and how to remove selected dropdown value from next coming dropdown.
Thanks in advance
Thank you very much ! Saved my day !
Cheers from Brazil.
Thanks very much, very helpful
for what purpose u were used webmethod pls wxplain that
Note: Only a member of this blog may post a comment.