I'm trying to add customer country and states drop downs. For some reason when I select a country, the states does not populate, instead the states dropdown vanishes :/
Not sure if I'm missing something? I'm on version 3.5
Here is Script code:
<script type="text/javascript">
$(function () {
$("#physicalCountry").change(function () {
var selectedItem = $(this).val();
var ddlStates = $("#physicalProvinceSA");
var statesProgress = $("#physicalProvinceSA-loading-progress");
statesProgress.show();
$.ajax({
cache: false,
type: "GET",
url: "@(Url.RouteUrl("GetStatesByCountryId"))",
data: { "countryId": selectedItem, "addSelectStateItem": "true" },
success: function (data) {
ddlStates.html('');
$.each(data, function (id, option) {
ddlStates.append($('<option></option>').val(option.id).html(option.name));
});
statesProgress.hide();
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve states.');
statesProgress.hide();
}
});
});
});
</script>
Here is the form code:
<div class="form-row">
<label>
<span>Country<sup class="required">*</sup></span>
@Html.DropDownList("physicalCountry", Model.AvailableCountries)
</label>
</div>
<div class="form-row">
<label>
<span>Province<sup class="required">*</sup></span>
@Html.DropDownList("physicalProvinceSA", Model.AvailableStates)
<span id="physicalProvinceSA-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
</label>
</div>