Description:
In this article, I will explain how to
create dependent dropdown list using Jquery.
Sometimes in a web application where you will need two dropdowns
and one dropdown values will be dependent on the value of the other dropdown.
By using Ajax we can perform dependent dropdowns.
Whenever the dropdown value for parent dropdown list is
changed, a change () event is
triggered and it sends the id value of the selected parent dropdown value
through jquery Ajax
The ‘id’ value of parent dropdown will pass as
parameter with the method and it will return values for the child dropdown
list.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dependent
Dropdownlist using Jquery</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#ddlCountry").change(function () {
var svalue = $("#ddlCountry option:selected").val();
$.ajax({
type: "POST",
url: "Binddropdownbyajax.aspx/GetStateNames",
data: "{'countrycode': '" + svalue + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
$('#ddlState').empty();
$.each(response.d, function (key, value)
{ $("#ddlState").append($("<option></option>").val(value.scode).html(value.statename));
});
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlCountry" runat="server">
<asp:ListItem Value="0">--Select--</asp:ListItem>
<asp:ListItem Value="1">Pakistan</asp:ListItem>
<asp:ListItem Value="2">India</asp:ListItem>
<asp:ListItem Value="3">Australia</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlState" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>
Code Behind:
[System.Web.Services.WebMethod]
public static clsTable[] GetStateNames(int countrycode)
{
List<clsTable> obj = new List<clsTable>();
SqlConnection con = new SqlConnection("Data Source=----;Initial Catalog=dbname;User
ID=uid;Password=pwd;");
con.Open();
SqlCommand cmd = new SqlCommand("select scode,statename from state where ccode='" + countrycode + "'", con);
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
clsTable ClsObj = null;
foreach (DataRow tblerow in dt.Rows)
{
ClsObj = new clsTable();
ClsObj.scode = Convert.ToInt32(tblerow["scode"]);
ClsObj.statename = tblerow["statename"].ToString();
obj.Add(ClsObj);
}
return obj.ToArray();
}
public class clsTable
{
public int scode { get; set; }
public string statename { get; set; }
}
In the above example, dropdownlist ‘country’ contains a
list of countries. Based on the selection of countries dropdown, change() event
is called. In change() event, we are passing ‘id’ of the selected country and
calling a Ajax method for retrieving values for state dropdownlist.
No comments:
Post a Comment