使用jquery的trigger方法优化页面代码

标签：

我们做页面级联的时候经常会用到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");
});

代码精简不少哈。

使用jquery的trigger方法优化页面代码

标签：

原文地址：http://www.cnblogs.com/liuxiutianxia/p/4284490.html