我们做页面级联的时候经常会用到ajax处理数据,会为下拉菜单编写change事件。
//城市和区域联动 $("#City").change(function () { var cityValue = $("#City").val(); if (cityValue == -1) { return; } $.ajax({ url: "/BI/GetAreaInfo", type: "GET", data: { Id: cityValue }, timeout: 5000, async: false, dataType: "json", success: function (result) { $("#Area").empty(); $("#Area").append("<option value=‘-1‘>请选择区域</option>"); for (var i = 0; i < result.AreaInfo.length; i++) { $("<option value=‘" + result.AreaInfo[i].ID + "‘>" + result.AreaInfo[i].Name + "</option>").appendTo(‘#Area‘); } } }); });做编辑功能的时候,如果涉及到级联信息,我们会在绑定数据的时候给下拉框赋值:(下面代码一般都放在页尾部)
<input type="hidden" value="@Model.AreaId" id="hdAreaID" />
<input type="hidden" value="@Model.CityId" id="hdCityID" />
<script type="text/javascript">
var areaId = $("#hdAreaID").val();
var cityId = $("#hdCityID").val();
$("#City").val(cityId);
$.ajax({
url: "/BI/GetAreaInfo",
type: "GET",
data: { Id: cityId },
timeout: 5000,
async: false,
dataType: "json",
success: function (result) {
$("#Area").empty();
$("#Area").append("<option value=‘-1‘>请选择区域</option>");
for (var i = 0; i < result.AreaInfo.length; i++) {
$("<option value=‘" + result.AreaInfo[i].ID + "‘>" + result.AreaInfo[i].Name + "</option>").appendTo(‘#Area‘);
}
$("#Area").val(areaId);
}
});
</script>
那么问题来了,重复的代码量很多了吧,这个时候我们可以用jquery的trigger方法,模拟自动触发,即可达到同样效果。
$(function () {
$("#City").val("@Model.CityId");
$("#City").trigger("change", "@Model.CityId");
$("#Area").val("@Model.AreaId");
$("#Area").trigger("change", "@Model.AreaId");
});
代码精简不少哈。