MVC3 DropDownList + JSON + selected issue

问题

I have a very strange behaviour between my website (MVC3 + JQuery) and its mobile version (MVC3 + JQuery mobile) which are split in two distinct solutions.

I am using the following code to change the concent of a dropdown (SearchValue) according to another one (SearchBy).

Razor:

@Html.DropDownListFor(x => x.SelectedSearch, new SelectList(Model.SearchBy, "key", "value"), new { onchange = "GetValues($(this).val());" })
@Html.DropDownListFor(m => m.SelectedSearchValue, new SelectList(Model.SearchValue, "key", "value"))

JSON:

$.ajax({
                    type: "POST",
                    url: '@Url.Action("GetValues", "Search")',
                    data: "{searchId:" + searchId + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var options = $('#SelectedSearchValue');
                        $('option', options).remove(); // Remove previous

                        $.each(data, function () {
                            options.append($('<option/>').val(this.Id).text(this.Display));
                        });
                    }
                });

This code is working perfectly fine on my website (JQuery) but it is not the case on my mobile website (JQuery mobile) where it is working for Opera Mobile but not FF or IE or Safari ... (I tried with the User agent to simulate mobile devices)

The values of the SearchValue dropdown are correctly set but at the end of the JSON call, the selected value is the previous selected value (which is not in the possible values of the dropdown). I am not sure to be clear so I give you a little example :

I have the following possibilities for SearchBy: - Name - Car

When I select Name, I would like to display in SearchValue something like "Name1", "Name2", etc etc And when I select Car, I would like to display in SearchValue something like "Car1", "Car2", etc etc

But with the previous code on my mobile website, when I change the value "Name" to Car", the dropdownlist is correctly refilled with the right values ("Car1", "Car2", etc) but the selected value is the previous one (e.g. "Name1") even if it is not in the possible values of the dropdown. I also try to select manually the first value but nothing happens :

$('option[value=' + myBeautifulValue + ']').attr('selected', 'selected');

Do you have an idea to fix my problem? Is what I am doing wrong?

Thank you in advance for your help, Nico

PS: Sorry for my poor english

回答1:

Ok, I found the solution. I have to refresh the dropdown, wierd! Like that :

var myselect = $("#SelectedSearchValue"); 
myselect[0].selectedIndex = 0; 
myselect.selectmenu('refresh');

Source

回答2:

Try using jQuery's prop:

$('option[value=' + myBeautifulValue + ']').prop('selected', true);

See jQuery upgrade blog notes — when setting the selected attribute on an element use .prop to get/set the value.

来源：https://stackoverflow.com/questions/11371515/mvc3-dropdownlist-json-selected-issue

标签

json

asp.net-mvc-3

drop-down-menu

selected