Question

我的视图中有一个下拉列表：

<label><span class="hide">Type</span>@Html.DropDownListFor(m => m.FromValue, new SelectList(Model.FromType), new { id = "RSFromType"})</label>

这是我的观点模型：

public List<WebAMT.Layer.Models.Types.SearchFilterType> FromType { get; set; }

这是以下列表：

public enum SearchFilterType : int
{
      All = 0,
      PreferredEntity = 1,
      ActualEntity = 2,
      CityState = 3
}

模型在我的控制器中设置：

vm.FromType = SearchLogic.GetOriginList(true);

如果为true（默认），则此下拉列表将显示All，PreferredEntity，ActualEntity和CityState。

我需要在选择单选按钮时更改这些值：

<label>@Html.RadioButtonFor(m => m.ReservationArea, false, new { id = "RSMyReservationArea" }) My Reservation Area</label>
<label>@Html.RadioButtonFor(m => m.ReservationArea, true, new { id = "RSAllReservationArea" }) All Reservation Areas</label>

因此，当选择第一个按钮时，我需要列表来显示所有四个选项，但是当选择第二个按钮时，我需要它才能显示All和CityState。

我为此创建了一些JQuery：

$(function () {
     $('#RSMyReservationArea').click(function () {
          UpdateReservationSearchArea(true);
     });
     $('#RSAllReservationArea').click(function () {
          UpdateReservationSearchArea(false);
     });
});

function UpdateReservationSearchArea(area) {
     $.ajax({
            type: "GET",
            async: false,
            url: "@Url.Action("UpdateReservationArea", "Search")",
            data: { MyResArea: area },
        cache: false,
        dataType: "html",
        failure: function () {
            alert(" An error occurred.");
        },
        success: function(result) {
            UpdateToAndFromTypes(result);
        }
    });
}

这导致我的控制器：

[HttpGet]
public JsonResult UpdateReservationArea(ReservationSearchVM vm, bool myResArea)
{
       List<WebAMT.Layer.Models.Types.SearchFilterType> originList = new List<Layer.Models.Types.SearchFilterType>();
       originList = SearchLogic.GetOriginList(myResArea);
       return Json(new { originList }, JsonRequestBehavior.AllowGet);
}

所以这就是我遇到问题的地方。我有这个JQuery来处理返回，我无法弄清楚如何根据JSon返回的内容更新FromType的下拉列表，因为我做的事似乎没有用。所以我有一个控制台日志并检查结果，而true和false都返回originList {0,1,2,3}或originList {0,1,2,3}：

function UpdateToAndFromTypes(result) {
        $("#RSFromType").empty();
        console.log(result);
};

我需要在最后一个脚本中包含更新dropdown list的内容。

Answer 1

由于已经呈现了标记，您可以继续并替换该内容选择标记。

function UpdateToAndFromTypes(result) 
{
        $("#RSFromType").empty();
        var selectContainer;
        for(var i=0; i < result.originList.length;i++)
        {
         selectContainer += "<option>" + result.originList[i] + "</option>";
        } 
        $("#RSFromType").html(selectContainer);
};

Answer 2

假设您的result位于正确的json可枚举对象中。

   function UpdateToAndFromTypes(result) {
    $("#FromValue").empty();
       $.each(result, function(key, value) {   
         $('#FromValue')
             .append($("<option></option>")
             .attr("value",key)
             .text(value)); 
       });    
    };

如何从JSON返回更新我的下拉列表？

2 个答案: