ASP.NET MVC3 cascading DropDownList is not working properly
I'm using cascading dropdownlist. When I select make it post makeId to the server using webservice and returns models. Then I add models to dropdownlist
The problem is. If I inspect models dropdownlist in firefox using firebug tool, I'm able to see just added models, but when I click it opens empty.
I'm using jQuery Mobile and jQuery Selectbox.
Here is my code:
$(document).ready(function () {
$('#Makes').change(function () {
getModels();
});
});
function getModels() {
var make = $('#Makes').val();
$.ajax({
type: "POST",
url: "/Services/CarService.asmx/Models",
data: "{makeId: '" + make + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response.d);
var models = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#Models').attr('disabled', false).removeOption(/./);
for (var i = 0; i < models.length; i++) {
var val = models[i];
var text = models[i];
$('#Models').addOption(val, text, false);
alert(models[i]);
}
}
});
}
@Html.DropDownList("Makes", "Please select make")
<select id="Models"></select>
[WebMethod]
public List<string> Models(int makeId)
{
var dataContext = new SearchModel();
var models = from m in dataContext.GetAllModels()
where m.Id == makeId
开发者_StackOverflow中文版 select m.Model;
return models.ToList();
}
try to use
var ModelSel = document.getElementById('Models');
for (var i = 0; i < models.length; i++) {
var val = models[i];
var text = models[i];
ModelSel.options[i]=new Option(val, text);
}
I have found a solution for my problem
Refreshing a select
If you manipulate a select via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
精彩评论