我在互联网上搜索过这个,但找不到任何合适的答案。我有一个部分视图,其中有三个不同的下拉列表。我在其中使用了两种不同的功能..
- 在更改第一个下拉列表时,其他两个得到更新
- 在更改第二个下拉列表时,第三个更新
在更改第二个下拉列表之前一切正常,如果我想再次更改第一个下拉列表,则第三个下拉列表不会加载并且不返回任何值。
$("#FoodItemID").change(function () { //
var id = $("select#FoodItemID").val();
$.ajax({
url: '/FoodRecipe/GetServingType',
type: "POST",
data: { FoodItemID: $("select#FoodItemID").val() },
success: function (result) {
$("#ServingTypeID").val(result[0]);
$("#ServingSubTypeID").val(result[1]);
}
});
});
$("#ServingTypeID").change(function () {
$.ajax({
url: '/FoodRecipe/GetServing',
type: "POST",
data: { ServingTypeID: $("select#ServingTypeID").val() },
success: function (result) {
var len = result.length;
$("#ServingSubTypeID").empty();
for (var i = 0; i < len; i++) {
var id = result[i]['id'];
var name = result[i]['name'];
$("#ServingSubTypeID").append("<option value='" + id + "'>" + name + "</option>");
$('#ServingSubTypeID').trigger('select:updated'); //this is not working for me
}
}
});
});
这是我的下拉代码。我无法上传整个部分视图,因为它会导致加载后丢失所有值,我知道我遇到的问题与我更改第二个下拉列表后下拉列表中的值没有更新有关(因为值来自控制器更改)
所以我认为一个不错的选择是以某种方式重新加载第三个下拉列表中的值。但是我不知道该怎么做..!!
我知道这可能是最简单的事情,但我无法弄清楚。