When selecting items inside of my cascading dropdowns, I am missing the last item to be selected. But when I select an option, it finally populates the last item in the list, and it would then be visible and selectable.
ViewModel
public IEnumerable<SelectListItem> CyspCityStateCountry { get; set; }
[Required(ErrorMessage = "Please select a country.")]
public int CTRY_ID { get; set; }
public IEnumerable<SelectListItem> GetCanMexUsa { get; set; }
[Required(ErrorMessage = "Please select a state.")]
public int StprId { get; set; }
public IEnumerable<SelectListItem> StprStateProvince { get; set; }
[Required(ErrorMessage = "Please select a city.")]
public int CITY_ID { get; set; }
public IEnumerable<SelectListItem> GetCityStprCtry { get; set; }
JsonRequest
public JsonResult GetStateList(int ctryId)
{
_db.Configuration.ProxyCreationEnabled = false;
var stateList =
_db.TRLOG_CORN_ANALY_StprStateProvinces.Where(x => x.StprCtryId == ctryId).Select(a => new
{
a.StprId,
a.StprName
}).ToList();
return Json(stateList, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCityList(int cyspStprId)
{
_db.Configuration.ProxyCreationEnabled = false;
var cityList =
_db.TRLOG_CORN_ANALY_GetCityStprCtryByCysp().Where(t => t.STPR_ID == cyspStprId).ToList();
return Json(cityList, JsonRequestBehavior.AllowGet);
}
Razor
<div class="col-xs-4 input-group-sm">
<div class="form-group">
<label class="DBlock">Country</label>
@Html.DropDownListFor(m => m.CTRY_ID, new SelectList(Model.GetCanMexUsa, "Value", "Text"), "--Select--", new { @class = "form-control input-sm", style = "display: block"})
<p>@Html.ValidationMessageFor(m => m.CTRY_ID)</p>
</div>
</div>
<div class="col-xs-4 input-group-sm">
<div class="form-group">
<label class="DBlock">State</label>
@Html.DropDownListFor(m => m.StprId, new SelectList(" "), "--Select--", new { @class = "form-control input-sm", style = "display: block"})
<p>@Html.ValidationMessageFor(m => m.StprId)</p>
</div>
</div>
<div class="col-xs-4 input-group-sm">
<div class="form-group">
<label class="DBlock">City</label>
@Html.DropDownListFor(m => m.CITY_ID, new SelectList(" "), "--Select--", new { @class = "form-control input-sm", style = "display: block" })
<p>@Html.ValidationMessageFor(m => m.CITY_ID)</p>
</div>
</div>
JQuery
$(function() {
$("#CTRY_ID").chosen().change(function() {
$.get("/Form/GetStateList",
{ CTRY_ID: $("#CTRY_ID").trigger("chosen:updated").val() },
function(data) {
$("#StprId").empty().append($('<option></option>').val('').text('--Select--'));
$.each(data,
function(index, row) {
$("#StprId").chosen().trigger("chosen:updated").append("<option value = '" +
row.StprId +
"'>" +
row.StprName +
"</option>");
});
});
$("#StprId").chosen().change(function() {
$.get("/Shipment/GetCityList",
{ cyspStprId: $("#StprId").trigger("chosen:updated").val() },
function(data) {
"use strict";
$("#CITY_ID").empty().append($('<option></option>').val('').text('--Select--'));
$.each(data,
function(index, row) {
$("#CITY_ID").chosen().trigger("chosen:updated").append("<option value = '" +
row.CYSP_CITY_ID +
"'>" +
row.CITY_NAME +
"</option>");
});
});
});
});
});
The last selection that should be view-able is Wyoming, but my select list stops at Wisconsin. But, when you inspect the drop down the last item Wyoming is view-able in the inspection view but not selectable until another option in the drop-down is selected and then Wyoming shows up and is selectable. I am at a loss as to what to do to fix it, any help would be appreciated.
You seem to be calling chosen.trigger("chosen:updated") before adding the option to the list, and calling it once for every option. Try moving that call to after the $.each so chosen can pick up all the option elements and only once.
