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 之后,这样选择的可以选择所有选项元素并且只能选择一次。
当 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 之后,这样选择的可以选择所有选项元素并且只能选择一次。