Json MVC 5 中的请求缺少级联下拉列表中的最后一个 select 列表项

Json request in MVC 5 is missing the last select list item in cascading drop down

当 select 在级联下拉列表中编辑项目时,我遗漏了要 select 编辑的最后一个项目。但是当我 select 一个选项时,它最终会填充列表中的最后一项,然后它将可见并且 select 可用。

视图模型

 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);
    }

剃须刀

  <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>");
                            });
                    });
            });
        });
    });

Inspection View of States

最后一个 select 应该可以查看的离子是怀俄明州,但我的 select 列表在威斯康星州停止。但是,当您检查下拉列表时,怀俄明州的最后一项在检查视图中是可查看的,但不能 select 直到下拉列表中的另一个选项被 selected 然后怀俄明州出现并且是select能。我不知道如何修复它,我们将不胜感激。

您似乎在将选项添加到列表之前调用 chosen.trigger("chosen:updated"),并且为每个选项调用一次。尝试将该调用移动到 $.each 之后,这样选择的可以选择所有选项元素并且只能选择一次。