使用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");
});

代码精简不少哈。

posted @ 2015-02-10 17:51  创可贴Y  阅读(342)  评论(0编辑  收藏  举报