How To Bind Country And State In Dropdownlist Using JQuery
Here we are binding Country list in dropdownlist and on selected country name, we are binding State list according to selected country.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Country state in Dropdownlist</title>
<script src="Scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=ddlCountry.ClientID%>").change(function
()
{
var CIds = $("#<%=ddlCountry.ClientID%> option:selected").text();
if (CIds != "Select") {
BindState();
}
});
});
function BindState() {
$.ajax({
type: "POST",
url: "http://localhost:50890/JQuery/test/Country-State.aspx/FillState",
data: "{'CId': '" + $("#<%=ddlCountry.ClientID%>"
).val()
+
"'}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
var jsondata = JSON.parse(data.d);
$.each(jsondata, function (key, value) {
$('#<%=ddlState.ClientID%>').append($("<option></option>")
.val(value.SId).html(value.State));
});
},
error: function () {
alert("error");
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlState" runat="server" Width="200px"></asp:DropDownList>
</div>
</form>
</body>
using System.Web.Services;
using System.Web.Script.Serialization;
public partial class JQuery_test_Country_State : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillCountry();
}
}
public void FillCountry()
{
DataTable dt = GetDataTable("Select ID, Country from tbl_Country");
if (dt.Rows.Count > 0)
{
ddlCountry.DataSource = dt;
ddlCountry.DataTextField = "Country";
ddlCountry.DataValueField = "ID";
ddlCountry.DataBind();
ddlCountry.Items.Insert(0, "Select");
}
}
[WebMethod]
public static string FillState(string CId)
{
string retval = "[]";
List<States> state = new List<States>();
DataTable dt = GetSqlDataTable("Select SId, State from tbl_State where CountryId=" + CId);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
States objstate = new States();
objstate.SId = dt.Rows[i]["SId"].ToString();
objstate.State = dt.Rows[i]["State"].ToString();
state.Add(objstate);
}
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
retval = serializer.Serialize(state);
return retval;
}
public static DataTable GetSqlDataTable(string sql)
{
SqlConnection con= new SqlConnection
(@"DataSource=JITESH-PC;Initial Catalog=db_mlm;Integrated Security=True");
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(sql, con);
con.Open();
da.Fill(dt);
con.Close();
return dt;
}
class States
{
public string SId { get; set
;
}
public String State { get; set
;
}
}