Country - State - City Dropdown - Binding - Change Event using JQuery Ajax
Here I have created blog, how to use dropdown cascading like, country, state and city.
I have use some generic code.
To bind state and city dropdown I have used ajax call.
Database Script
/****** Object: Table [dbo].[Country] ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Country](
[CountryId] [uniqueidentifier] NOT NULL,
[CountryName] [nvarchar](50) NOT NULL,
[CountryCode] [nvarchar](5) NULL,
[CountryPhoneCode] [nvarchar](7) NULL,
[Status] [nvarchar](10) NOT NULL,
[CreatedBy] [uniqueidentifier] NOT NULL,
[CreatedDate] [datetime] NOT NULL CONSTRAINT [DF_Country_CreatedDate] DEFAULT (getdate()),
[UpdatedBy] [uniqueidentifier] NULL,
[UpdatedDate] [datetime] NOT NULL CONSTRAINT [DF_Country_UpdatedDate] DEFAULT (getdate()),
CONSTRAINT [PK_Country] PRIMARY KEY CLUSTERED
(
[CountryId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object: Table [dbo].[State] ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[State](
[StateId] [uniqueidentifier] NOT NULL,
[CountryId] [uniqueidentifier] NOT NULL,
[StateName] [nvarchar](50) NOT NULL,
[StateCode] [nvarchar](5) NULL,
[Status] [nvarchar](10) NOT NULL,
[CreatedBy] [uniqueidentifier] NOT NULL,
[CreatedDate] [datetime] NOT NULL CONSTRAINT [DF_State_CreatedDate] DEFAULT (getdate()),
[UpdatedBy] [uniqueidentifier] NULL,
[UpdatedDate] [datetime] NOT NULL CONSTRAINT [DF_State_UpdatedDate] DEFAULT (getdate()),
CONSTRAINT [PK_QState] PRIMARY KEY CLUSTERED
(
[StateId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object: Table [dbo].[City] ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[City](
[CityId] [uniqueidentifier] NOT NULL,
[StateId] [uniqueidentifier] NOT NULL,
[CityName] [nvarchar](50) NOT NULL,
[CityCode] [nvarchar](5) NULL,
[CityPhoneCode] [nvarchar](7) NULL,
[Status] [nvarchar](10) NOT NULL,
[CreatedBy] [uniqueidentifier] NOT NULL,
[CreatedDate] [datetime] NOT NULL CONSTRAINT [DF_City_CreatedDate] DEFAULT (getdate()),
[UpdatedBy] [uniqueidentifier] NULL,
[UpdatedDate] [datetime] NOT NULL CONSTRAINT [DF_City_UpdatedDate] DEFAULT (getdate()),
CONSTRAINT [PK_City] PRIMARY KEY CLUSTERED
(
[CityId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[City] WITH CHECK ADD CONSTRAINT [FK_City_State] FOREIGN KEY([StateId])
REFERENCES [dbo].[State] ([StateId])
GO
ALTER TABLE [dbo].[City] CHECK CONSTRAINT [FK_City_State]
GO
ALTER TABLE [dbo].[State] WITH CHECK ADD CONSTRAINT [FK_State_Country] FOREIGN KEY([CountryId])
REFERENCES [dbo].[Country] ([CountryId])
GO
ALTER TABLE [dbo].[State] CHECK CONSTRAINT [FK_State_Country]
GO
ALTER TABLE [dbo].[State] WITH CHECK ADD CONSTRAINT [FK_State_QDevCountry] FOREIGN KEY([CountryId])
REFERENCES [dbo].[Country] ([CountryId])
GO
ALTER TABLE [dbo].[State] CHECK CONSTRAINT [FK_State_QDevCountry]
GO
/****** Object: Table [dbo].[Users] ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Users](
[UserId] [uniqueidentifier] NOT NULL,
[usertype] [nvarchar](10) NOT NULL,
[Username] [nvarchar](50) NOT NULL,
[Password] [nvarchar](100) NOT NULL,
[FirstName] [nvarchar](40) NULL,
[LastName] [nvarchar](30) NOT NULL,
[AddressLine1] [nvarchar](150) NULL,
[AddressLine2] [nvarchar](150) NULL,
[CityId] [uniqueidentifier] NULL,
[EmailId] [nvarchar](50) NULL,
[MobileNumber] [nvarchar](15) NULL,
[HomePhoneNumber] [nvarchar](15) NULL,
[WorkPhoneNumber1] [nvarchar](15) NULL,
[WorkPhoneNumber2] [nvarchar](15) NULL,
[Status] [nvarchar](8) NOT NULL,
[CreatedBy] [uniqueidentifier] NOT NULL,
[CreatedDate] [datetime] NULL CONSTRAINT [DF_Users_CreatedDate] DEFAULT (getdate()),
[UpdatedBy] [uniqueidentifier] NULL,
[UpdatedDate] [datetime] NULL CONSTRAINT [DF_Users_UpdatedDate] DEFAULT (getdate()),
CONSTRAINT [PK_Users] PRIMARY KEY CLUSTERED
(
[UserId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
View Model
namespace Demo.ViewModel
{
public class VMCountry
{
public System.Guid CountryId { get; set; }
[Required]
[DisplayName("Country Name")]
public string CountryName { get; set; }
[Required]
[DisplayName("Country Code")]
public string CountryCode { get; set; }
public string CountryPhoneCode { get; set; }
public string Status { get; set; }
public System.Guid CreatedBy { get; set; }
public System.DateTime CreatedDate { get; set; }
public Nullable<System.Guid> UpdatedBy { get; set; }
public System.DateTime UpdatedDate { get; set; }
}
}
namespace Demo.ViewModel
{
public class VMState
{
public System.Guid StateId { get; set; }
public System.Guid CountryId { get; set; }
public string StateName { get; set; }
public string StateCode { get; set; }
public string Status { get; set; }
public System.Guid CreatedBy { get; set; }
public System.DateTime CreatedDate { get; set; }
public Nullable<System.Guid> UpdatedBy { get; set; }
public System.DateTime UpdatedDate { get; set; }
public List<SelectListItem> CountryList { get; set; }
}
}
namespace Demo.ViewModel
{
public class VMCity
{
public System.Guid CityId { get; set; }
public System.Guid StateId { get; set; }
public string CityName { get; set; }
public string CityCode { get; set; }
public string CityPhoneCode { get; set; }
public string Status { get; set; }
public System.Guid CreatedBy { get; set; }
public System.DateTime CreatedDate { get; set; }
public Nullable<System.Guid> UpdatedBy { get; set; }
public System.DateTime UpdatedDate { get; set; }
public List<SelectListItem> CountryList { get; set; }
public List<SelectListItem> StateList { get; set; }
public System.Guid CountryId { get; set; }
}
}
namespace Demo.ViewModel
{
public class VMUser
{
public System.Guid UserId { get; set; }
public string usertype { get; set; }
[Required]
[DisplayName("Username")]
public string Username { get; set; }
[Required]
[DataType(DataType.Password)]
public string Password { get; set; }
[Required]
[DisplayName("First Name")]
public string FirstName { get; set; }
[DisplayName("Last Name")]
public string LastName { get; set; }
public string AddressLine1 { get; set; }
public string AddressLine2 { get; set; }
public Nullable<System.Guid> CityId { get; set; }
[DisplayName("Email Id")]
public string EmailId { get; set; }
[DisplayName("Mobile Number")]
public string MobileNumber { get; set; }
public string Status { get; set; }
public System.Guid CreatedBy { get; set; }
public Nullable<System.DateTime> CreatedDate { get; set; }
public Nullable<System.Guid> UpdatedBy { get; set; }
public Nullable<System.DateTime> UpdatedDate { get; set; }
//Extra Properties for page view
public List<SelectListItem> CountryList { get; set; }
public List<SelectListItem> StateList { get; set; }
public List<SelectListItem> CityList { get; set; }
public Nullable<System.Guid> Country { get; set; }
public Nullable<System.Guid> State { get; set; }
}
}
Use Automapper to map data model and view model.
namespace Demo.Business
{
public static class AutoMapperConfig
{
public static void RegisterMappings()
{
Mapper.Initialize(cfg =>
{
cfg.CreateMap<VMCountry, Country>();
cfg.CreateMap<Country, VMCountry>();
cfg.CreateMap<VMState, State>();
cfg.CreateMap<State, VMState>();
cfg.CreateMap<VMCity, City>();
cfg.CreateMap<City, VMCity>();
});
}
}
}
Setup with Automapper config in global.asax
namespace Demo.Web
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AutoMapperConfig.RegisterMappings();
}
}
}
Setup Generic class and properties.
namespace Demo.Common
{
public class ResultResponse<T>
{
public bool Success { get; set; } = true;
public string Message { get; set; }
public DTResult<T> Data { get; set; }
public T Datas { get; set; }
public Dictionary<string, string> Exceptions { get; set; }
}
public class ResultResponses<T>
{
public bool Success { get; set; } = true;
public string Message { get; set; }
public T Data { get; set; }
public Dictionary<string, string> Exceptions { get; set; }
}
public class ResultResponseSingle<T>
{
public bool Success { get; set; } = true;
public string Message { get; set; }
public T Data { get; set; }
public Dictionary<string, string> Exceptions { get; set; }
}
}
Business Layer
namespace Demo.Business
{
public class BLCountry
{
public static ResultResponses<List<VMCountry>> GetCountryListforDDL()
{
var exceptions = new Dictionary<string, string>();
List<VMCountry> data = new List<VMCountry>();
try
{
AnroAppEntities db = new AnroAppEntities();
var datas = db.Countries.AsQueryable().OrderBy(c=>c.CountryName).ToList();
var Datas = AutoMapper.Mapper.Map<List<Country>, List<VMCountry>>(datas);
data = Datas;
}
catch (SqlException sqlException)
{
exceptions.Add("SqlException", sqlException.Message);
}
catch (TaskCanceledException taskCanceledException)
{
exceptions.Add("TaskCanceledException", taskCanceledException.Message);
}
catch (Exception ex)
{
exceptions.Add("Exception", ex.Message);
}
return new ResultResponses<List<VMCountry>>
{
Exceptions = exceptions,
Data = data
};
}
}
}
namespace Demo.Business
{
public class BLStates
{
public static ResultResponses<List<VMState>> GetStateListforDDL(string CountryId)
{
var exceptions = new Dictionary<string, string>();
List<VMState> Data = new List<VMState>();
try
{
AnroAppEntities db = new AnroAppEntities();
Guid countryId = new Guid(CountryId);
var datas = db.States.AsQueryable().Where(a => a.CountryId == countryId).OrderBy(c => c.StateName).ToList();
var Datas = AutoMapper.Mapper.Map<List<State>, List<VMState>>(datas);
Data = Datas;
}
catch (SqlException sqlException)
{
exceptions.Add("SqlException", sqlException.Message);
}
catch (TaskCanceledException taskCanceledException)
{
exceptions.Add("TaskCanceledException", taskCanceledException.Message);
}
catch (Exception ex)
{
exceptions.Add("Exception", ex.Message);
}
return new ResultResponses<List<VMState>>
{
Exceptions = exceptions,
Data = Data
};
}
}
}
namespace Demo.Business
{
public class BLCity
{
public static ResultResponses<List<VMCity>> GetCityListforDDL(string StateId)
{
var exceptions = new Dictionary<string, string>();
List<VMCity> Data = new List<VMCity>();
try
{
AnroAppEntities db = new AnroAppEntities();
Guid stateId = new Guid(StateId);
var datas = db.Cities.AsQueryable().Where(a => a.StateId == stateId).OrderBy(c => c.CityName).ToList();
var Datas = AutoMapper.Mapper.Map<List<City>, List<VMCity>>(datas);
Data = Datas;
}
catch (SqlException sqlException)
{
exceptions.Add("SqlException", sqlException.Message);
}
catch (TaskCanceledException taskCanceledException)
{
exceptions.Add("TaskCanceledException", taskCanceledException.Message);
}
catch (Exception ex)
{
exceptions.Add("Exception", ex.Message);
}
return new ResultResponses<List<VMCity>>
{
Exceptions = exceptions,
Data = Data
};
}
}
}
namespace Demo.Business
{
public class BLUsers
{
public static ResultResponse<string> Save(VMUser objData, string AddorUpdate)
{
string returnMessage = "";
var exceptions = new Dictionary<string, string>();
try
{
using (var db = new AnroAppEntities())
{
var user = AutoMapper.Mapper.Map<VMUser, User>(objData);
if (AddorUpdate == "add")
db.Users.Add(user);
else
db.Entry(user).State = System.Data.Entity.EntityState.Modified;
var i = db.SaveChanges();
if (i == 1)
returnMessage = "success";
else
returnMessage = "Something wrong";
}
}
catch (System.Data.Entity.Validation.DbEntityValidationException dbEx)
{
Exception raise = dbEx;
foreach (var validationErrors in dbEx.EntityValidationErrors)
{
foreach (var validationError in validationErrors.ValidationErrors)
{
string message = string.Format("{0}:{1}",
validationErrors.Entry.Entity.ToString(),
validationError.ErrorMessage);
raise = new InvalidOperationException(message, raise);
}
}
throw raise;
}
catch (SqlException sqlException)
{
exceptions.Add("SqlException", sqlException.Message);
}
catch (TaskCanceledException taskCanceledException)
{
exceptions.Add("TaskCanceledException", taskCanceledException.Message);
}
catch (Exception ex)
{
exceptions.Add("Exception", ex.Message);
}
return new ResultResponse<string>
{
Exceptions = exceptions,
Message = returnMessage
};
}
}
}
Common Controller
using Demo.Business;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace Demo.Web.Controllers
{
public class CommonController : Controller
{
public static List<SelectListItem> BindCountryList()
{
List<SelectListItem> items = new List<SelectListItem>();
var list = BLCountry.GetCountryListforDDL();
var statuslist = list.Data.ToList();
items = statuslist.Select(a => new SelectListItem
{
Text = a.CountryName,
Value = a.CountryId.ToString()
}).ToList();
return items;
}
public static List<SelectListItem> BindStateList(string id)
{
List<SelectListItem> items = new List<SelectListItem>();
var list = BLStates.GetStateListforDDL(id);
var statuslist = list.Data.ToList();
items = statuslist.Select(a => new SelectListItem
{
Text = a.StateName,
Value = a.StateId.ToString()
}).ToList();
return items;
}
public static List<SelectListItem> BindCityList(string id)
{
List<SelectListItem> items = new List<SelectListItem>();
var list = BLCity.GetCityListforDDL(id);
var statuslist = list.Data.ToList();
items = statuslist.Select(a => new SelectListItem
{
Text = a.CityName,
Value = a.StateId.ToString()
}).ToList();
return items;
}
public JsonResult GetStates(string id)
{
List<SelectListItem> datas = new List<SelectListItem>();
var list = BLStates.GetStateListforDDL(id).Data.ToList();
datas = list.Select(a => new SelectListItem
{
Text = a.StateName,
Value = a.StateId.ToString()
}).ToList();
datas.Insert(0, new SelectListItem { Text = "Select State", Value = "select" });
return Json(new SelectList(datas, "Value", "Text"));
}
public JsonResult GetCity(string id)
{
List<SelectListItem> datas = new List<SelectListItem>();
var list = BLCity.GetCityListforDDL(id).Data.ToList();
datas = list.Select(a => new SelectListItem
{
Text = a.CityName,
Value = a.CityId.ToString()
}).ToList();
datas.Insert(0, new SelectListItem { Text = "Select City", Value = "select" });
return Json(new SelectList(datas, "Value", "Text"));
}
public ActionResult refreshdata()
{
return Json(new { message = "success" }, JsonRequestBehavior.AllowGet);
}
}
}
User Controller with Register Action and Save action
namespace Demo.Web.Controllers
{
public class UserController : Controller
{
public ActionResult Register()
{
VMUser model = new VMUser();
model.CountryList = CommonController.BindCountryList();
model.CountryList = CommonController.BindCountryList();
var countryid = model.CountryList.Where(a => a.Text.ToLower() == "india").FirstOrDefault().Value;
model.Country = countryid != null ? new Guid(countryid) : Guid.NewGuid();
model.StateList = CommonController.BindStateList(countryid != null ? countryid : Guid.NewGuid().ToString());
var statedata = model.StateList.Where(s => s.Text.ToLower() == "gujarat").FirstOrDefault();
var stateid = statedata != null ? statedata.Value : null;
model.State = stateid != null ? new Guid(stateid) : Guid.NewGuid();
model.CityList = CommonController.BindCityList(stateid != null ? stateid : Guid.NewGuid().ToString());
var citydata = model.CityList.Where(s => s.Text.ToLower() == "ahmedabad").FirstOrDefault();
var cityid = citydata != null ? citydata.Value : null;
model.CityId = cityid != null ? new Guid(cityid) : Guid.NewGuid();
return View(model);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(VMUser model)
{
try
{
if (ModelState.IsValid)
{
model.UserId = Guid.NewGuid();
model.Status = "Active";
model.CreatedBy = Guid.NewGuid();
model.CreatedDate = DateTime.Now;
model.UpdatedBy = null;
model.UpdatedDate = DateTime.Now;
var data = BLUser.Save(model, "add");
if (data.Exceptions.Count > 0)
{
string error = "";
foreach (var keyValuePair in data.Exceptions)
{
error += keyValuePair.Value;
}
ModelState.AddModelError("", error);
}
return RedirectToAction("Index");
}
return View(model);
}
catch (Exception ex)
{
ModelState.AddModelError("", ex.Message);
return View(model);
}
}
}
}
View page
@model Demo.ViewModel.VMUser
@{
ViewBag.Title = "Register";
}
<section class="content">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">User - Register</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="col-md-8">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div>
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row">
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger validation-msg " })
</div>
</div>
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger validation-msg " })
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger validation-msg " })
</div>
</div>
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger validation-msg " })
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.EmailId, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.EmailId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EmailId, "", new { @class = "text-danger validation-msg " })
</div>
</div>
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.MobileNumber, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.MobileNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MobileNumber, "", new { @class = "text-danger validation-msg " })
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.AddressLine1, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.AddressLine1, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AddressLine1, "", new { @class = "text-danger validation-msg " })
</div>
</div>
<div class="col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.AddressLine2, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.AddressLine2, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AddressLine2, "", new { @class = "text-danger validation-msg " })
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
@Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => model.Country, Model.CountryList, "Please select a Country", htmlAttributes: new { @class = "form-control select2", @id = "countryid" })
@Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger validation-msg " })
</div>
</div>
<div class="col-md-4">
<div class="form-group">
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => model.State, Model.StateList, "Please select a State", htmlAttributes: new { @class = "form-control select2", @id = "stateid" })
@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger validation-msg " })
</div>
</div>
<div class="col-md-4">
<div class="form-group">
@Html.LabelFor(model => model.CityId, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => model.CityId, Model.CityList, "Please select a City", htmlAttributes: new { @class = "form-control select2", @id = "cityid" })
@Html.ValidationMessageFor(model => model.CityId, "", new { @class = "text-danger validation-msg " })
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
@Html.ActionLink("Back to List", "Index", null, new { @class = "btn btn-default" })
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</section>
<script src="~/Content/CustomJS/User.js"></script>
User.js - Ajax call
var sitename = '/demo.web';
$(document).ready(function () {
//Country Dropdownlist Selectedchange event
$("#countryid").change(function () {
$("#stateid").empty();
$("#cityid").empty();
$.ajax({
type: 'POST',
url: sitename + '/Common/GetStates',
dataType: 'json',
data: { id: $("#countryid").val() },
success: function (states) {
$.each(states, function (i, state) {
$("#stateid").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
});
$("#cityid").append('<option value="select">Select City</option>');
},
error: function (ex) {
alert('Failed to retrieve states.' + ex);
}
});
return false;
});
//State Dropdownlist Selectedchange event
$("#stateid").change(function () {
$("#cityid").empty();
$.ajax({
type: 'POST',
url: sitename + '/Common/GetCity',
dataType: 'json',
data: { id: $("#stateid").val() },
success: function (states) {
$.each(states, function (i, state) {
$("#cityid").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve states.' + ex);
}
});
return false;
});
});
Finally you will get below out put for dropdown
Enjoy !!!
:)
