You wire up an event handler for a specific element. You then completely replace that element, which means the new element doesn't have any event handlers.
You could solve the problem by using
delegated events[
^]. But there's a simpler solution.
Rather than replacing the entire
<select>
element, just replace the options within it:
$(function(){
$('#ddlCountry').change(function(){
$.ajax({
type: "post",
url: "/Addresses/GetStates",
data: { countryId: $(this).val() },
datatype: "json",
traditional: true
}).then(function(data){
var list = $("#ddlState");
var stateId = list.val();
list.empty();
$.each(data, function(index, item){
var opt = $("<option/>").attr("value", item.Value).text(item.Text);
list.append(opt);
});
list.val(stateId);
});
});
$('#ddlState').change(function(){
$.ajax({
type: "post",
url: "/Addresses/GetCities",
data: { stateId: $(this).val() },
datatype: "json",
traditional: true
}).then(function(data){
var list = $("#ddlCity");
var cityId = list.val();
list.empty();
$.each(data, function(index, item){
var opt = $("<option/>").attr("value", item.Value).text(item.Text);
list.append(opt);
});
list.val(cityId);
});
});
});