Question

I am updating a selectlist element using a jquery ajax callback in a mvc application when another selectlist is changed.
The ajax callback calls an action that returns a partialview.
The partialview is then set as the content of a div.
The problem is that when the partialview is returned it has the wrong item set as selected so i need a way to set the selected item following the callback.

$(document).ready(function () {
   $("#DependentDropDownValue").change(function () {
      var selected = $("#DropDownValue").val();
      var data = {data: $("#DependentDropDownValue").val()};
      $.ajax({
         url: "@Url.Action("IndexPartial","DropDown")",
         data: data,
         success: function (x) {
            $("#partialDiv").html(x);
            $("#DropDownSelectList").val(selected);
            }
        });
    });
});

x has the content:

"<select id="DropDownValue" name="DropDownValue">
    <option value="1">Emne11</option>
    <option value="2">Emne12</option>
    <option value="3">Emne13</option>
    <option value="4">Emne14</option>
    <option value="5">Emne15</option>
    <option selected="selected" value="0">-------</option>
    <option value="6">Emne21</option>
    <option value="7">Emne22</option>
    <option value="8">Emne23</option>
    <option value="9">Emne24</option>
    <option value="10">Emne25</option>
 </select>"

The variable “selected” contains the value of the selected option before the callback.. that item has to be set as selected again.

I have tried using

 $("#DropDownSelectList").val(selected);

but that doesnt seem to work

Answer 1

The id of the select list that you have shown is DropDownValue and not DropDownSelectList, so make sure that you are using the correct id in your script:

$('#DropDownValue').val(selected);