How to update my dropdown list from JSON return?

Question

I have a dropdown list in my view:

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

And this is from my view model:

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

Which is a list of these:

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

The model gets set in my controller:

vm.FromType = SearchLogic.GetOriginList(true);

When true (default), this dropdown list displays All, PreferredEntity, ActualEntity, and CityState.

I need these values to change upon radio button selection:

<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>

So when the first button is selected, I need the list to display all four options, but when the second is selected, I need it to display only All, and CityState.

I have created some JQuery for this:

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

Which leads to this in my controller:

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

So here is where I am having problems. I have this JQuery to handle the return, and I cannot figure out how to update the dropdown list for FromType based on what the JSon return is, as nothing I do seems to work. So I have a console log and checked the result, and both true and false are returning originList{0,1,2,3} or originList{0,1,2,3}:

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

What I need to include in this last script to update the contents of the dropdown list.

You've shown us a whole lot of code, but not what you tried to actually update the select. Maybe simplify your question to just the JSON data and the jQuery you're trying to use. All the controller stuff is probably irrelevant, assuming the JSON is what you expect. — isherwood, Sep 08 '14 at 19:07
please remove all server code that is irrelevant to issue, also using `async:false` is a terrible practice — charlietfl, Sep 08 '14 at 19:14

score 1 · Answer 1 · answered Sep 08 '14 at 19:14

Since the markup is already rendered, you can just go ahead and replace the contents of the select tag.

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

score 1 · Accepted Answer · answered Sep 08 '14 at 19:37

1

Assuming your result is in proper json enumerable object.

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

answered Sep 08 '14 at 19:37

HaBo

13,999
36
114
206

Yes, thank you, I ended up using a similar approach to this after changing what I was passing. – user3645143 Sep 09 '14 at 14:32

How to update my dropdown list from JSON return?

2 Answers2