MVC3 DropDownList + JSON + selected issue

Question

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

nFournier · Accepted Answer · 2012-07-07 04:22:50Z

3

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

answered Jul 7, 2012 at 4:22

nFournier

1011 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2012-07-07 01:25:26Z

1

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.

edited Jul 7, 2012 at 1:25

answered Jul 7, 2012 at 1:20

Alex

35.5k5 gold badges81 silver badges94 bronze badges

4 Comments

nFournier Over a year ago

Unfortunately it is not working. But I will use 'prop' now because it is preferred usage :) Thnks for your idea!

nFournier Over a year ago

Ok, I found the solution here. I have to refresh the dropdown, wierd! Like that : var myselect = $("#SelectedSearchValue"); myselect[0].selectedIndex = 0; myselect.selectmenu('refresh'); [andymatthews.net/read/2011/12/14/… [1]: andymatthews.net/read/2011/12/14/…

Alex Over a year ago

@nFournier that is new to me, you should answer your own question as it may help someone else having the same issue ...

nFournier Over a year ago

I was not able to do it because I got not enough reputation :)

Collectives™ on Stack Overflow

MVC3 DropDownList + JSON + selected issue

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related