Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery get dropdown selected value and text in asp.net

Sep 1, 2012
Introduction

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.

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

Column Name
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 RSS subscribe by email Subscribe by Email

6 comments :

Anonymous said...

good one

Kim said...

I try your way by using JQuery in asp.net and it's really helpful.

Anonymous said...

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

Anonymous said...

Thank you very much ! Saved my day !

Cheers from Brazil.

Anonymous said...

Thanks very much, very helpful

Unknown said...

for what purpose u were used webmethod pls wxplain that

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.