How to retain my dropdown design after dropdown cascading in MVC - asp.net-mvc

Question

I have problem with my dropdownlist design when i select the first dropdownlist the second dropdownlist will refresh but the design has been change
After I select a value from the country dropdownlist, a province dropdown design may suddenly change:
Here is my view
<div class="form-group">
<label class="control-label col-md-2">Country</label>
#Html.DropDownListFor(x => x.CountryNames, Model.CountryNames, "--Select--", new { #id = "ddlState", #class = "form-control" })
</div>
<div class="form-group">
<label class="control-label col-md-2">Province</label>
<div id="Province">
#Html.DropDownListFor(x => x.ProvinceNames, new List<SelectListItem>(), "--Select--", new { #id = "ddlProvince", #class = "form-control" })
</div>
</div>
And this is my script function:
$(document).ready(function () {
$('#ddlState').change(function () {
$.ajax({
type: "post",
url: "/ContactAddress/GetProvince",
data: { stateId: $('#ddlState').val() },
datatype: "json",
traditional: true,
success: function (data) {
var district = "<select id='ddlProvince'>";
district = district + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
district = district + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
district = district + '</select>';
$('#Province').html(district);
}
});
});
});
I change my code instead of .html i used append but my Province dll no data shows
$('#ddlState').change(function () {
$.ajax({
type: "post",
url: "/ContactAddress/GetProvince",
data: { stateId: $('#ddlState').val() },
datatype: "json",
traditional: true,
success: function (data) {
var district = "<select id='ddlProvince'>";
district = district + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
district = district + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
district = district + '</select>';
$('#dllProvince').append(district);
}
});
});
});

Answer 1

You are completely removing the dropdown from the html tree and rebuilding it by adding html to your div. Better way would be to remove the current options like
$('#ddlProvince')
.empty();
and then append the options. Your function should look like this.
success: function (data) {
var district = "";
$('#ddlProvince').append('<option value="">--Select--</option>');
for (var i = 0; i < data.length; i++) {
$('#ddlProvince').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option>');
}
}

Answer 2

this one working for me thank you for giving solution
$(document).ready(function () {
$('#ddlState').change(function () {
$('#ddlProvince').empty();
$.ajax({
type: "post",
url: "/ContactAddress/GetProvince",
data: { stateId: $('#ddlState').val() },
datatype: "json",
traditional: true,
success: function (data) {
var district = "<select id='ddlProvince'>";
district = district + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
$('#ddlProvince').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option>');
}
}
});
});
});