在选择其他-MVC时填充一个下拉列表

时间:2019-01-23 08:44:32

标签: ajax razor drop-down-menu

我正在尝试根据其他下拉列表的选择填充一个下拉列表。这就是我到目前为止所拥有的。

我的控制器:

[HttpPost]
    public JsonResult LoadReasonsByCategory(string resId)
    {
        var queryy = from item in db.T_SD_CD_GROUP
                     where resId.Contains(item.SCG_CD_TYPE)
                     select new
                     {
                         item.SCG_CD_TYPE,
                         item.SCG_CD_DESC
                     };

        var ObjList = new List<SelectListItem>();
        foreach (var item in queryy)
        {
            ObjList.Add(new SelectListItem() { Text = item.SCG_CD_DESC.ToString(), Value = (item.SCG_CD_TYPE) });
        }
        return Json(ObjList, JsonRequestBehavior.AllowGet);
    }

JS

 $("#ddlReasonCategory").on('change', function () {
                var item = $(this).find("option:selected");
                var value = $("#ddlReasonCategory").val(); //get the selected option value
            //var text = item.html(); //get the selected option text
            //alert(item.val());
                $.ajax({
                    url: '/CRActual/LoadReasonsByCategory',
                    type: 'POST',
                    datatype: 'application/json',
                    contentType: 'application/json',
                    data: JSON.stringify({ resId: value}),
                    success: function (data) {
                        alert("sUccess");
                        $("#ddlReasonType").html("");
                        ddlReasonType.append($('<option></option>').val("").html("Please select a City"));
                        for (var i = 0; i < data.length; i++) {
                            ddlReasonType.append($('<option></option>').val(data[i].Text).html(data[i].Text));
                        }
                    },
                    error: function () {
                        alert("Fail")
                    },
                });  

查看:

 @Html.DropDownList("ddlReasonCategory", (IEnumerable<SelectListItem>)ViewBag.ddlReasonCategory, new { @class = "chosen-select col-md-3", @data_placeholder = "Please select" })

@Html.DropDownList("ddlReasonType", new SelectList(string.Empty, "Value", "Text"), "Please select a Reason", new { @class = "chosen-select col-md-3", @data_placeholder = "Please select" })

这些代码绝对可以正确运行,但是第二个下拉绑定失败。我要去哪里错了?

1 个答案:

答案 0 :(得分:1)

如果您的LoadReasonsByCategory方法正确返回了数据,则按如下所示在success中写入Ajax功能代码:

success: function (data) {
   var ddlResonTypeSelector =  $("#ddlReasonType");
   ddlResonTypeSelector.empty();

   if (data.length > 0) {
      ddlResonTypeSelector.append($("<option>").val("").text("Please select a Reason Type"));
      $(data).each(function(index, item) {
            ddlResonTypeSelector.append($("<option>").val(item.value).text(item.text));
      });
   } else {
      ddlResonTypeSelector.append($("<option>").val("").text("Reason Type List is empty!"));
   }
},