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

代码精简不少哈。

时间: 2024-10-29 19:07:53

使用jquery的trigger方法优化页面代码的相关文章

YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法

上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把查询结果的 HTML 代码呈现到 Razor 视图中,考虑到灵活性,需要能在任意 Razor 视图中调用该方法,这样任意 Razor 页面都能以统一的方式方便地共享该页面部件的 HTML 内容,这对于代码的重用性和可维护性都是非常有必要的. 为实现上述要求,本文介绍如下可供选择的三种方式.   1.

jQuery 事件 - trigger() 方法 和 triggerHandler() 方法

trigger() 方法触发被选元素的指定事件类型. triggerHandler() 方法触发被选元素的指定事件类型.但不会执行浏览器默认动作,也不会产生事件冒泡. triggerHandler() 方法与 trigger() 方法类似.不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素. 不同之处: 它不会引起事件(比如表单提交)的默认行为 .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素.

使用jQuery中trigger()方法自动触发事件

一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click").focus(); 还有一种简写方式: $("input").click(); 还有其它事件就不一一列出了. 二.自定义事件 $("#btn").on("myClick",function(){ alert("自定义事件"); }

MVC操作LocalDB数据库,通过电影类型和名称来查询电影,在控制器里写的方法以及页面代码,自己参考。

//按电影类别来查询电影并排列 public ActionResult Index(string movieGenre, string searchString) { //可以放string类型的空的泛型集合 var Genrelst = new List<string>(); //下面的代码是从数据库中检索所有类型的LINQ 查询. var GenreQry = from d in db.Movies orderby d.Genre select d.Genre; //把不重复的电影类别放在

Jquery使用trigger()方法模拟事件

一.模拟select $('#selectCount').change(function(){     $('select#some').val(10).change();     //or     $('select#some').val(10).trigger('change'); } 二.模拟点击 $("button:first").click(function () {     update($("span:first")); }); $("but

javascript实现jQuery的trigger方法 .

function trigger(elem,event){ if(document.all) { elem.fireEvent("on" + event); } else { var evt = document.createEvent("Events"); evt.initEvent(event,true,true); elem.dispatchEvent(evt); } }

jQuery的css()方法

jQuery的css()方法下面的代码可以为div一次性设置多个样式属性<!DOCTYPE html><html><head><meta charset="utf-8"><title>css3</title><script src="js/jquery-1.9.1.min.js"></script><script type="text/javascript

关于jquery的serialize方法转换空格为+号的解决方法

jquery的 serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能:但是实际使用中去发现了如下问题:例如:< textarea name="content">abc 123 <  /  textarea >那么在执行 serialize()方法后,得到的却是  abc+123  这样的字符串:即jquery的序列化方法对空格进行了转义,转换成了 + 号.jquery中serialize方法的部分代码如下所示://............

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu