tuy

select异步更新option时IE不会更新默认选中项

一:问题出现场景描述

异步请求select下拉框元素的时候,ajax请求回来,然后拼接成option加入到select,此时在IE下面select默认无法选中第一个,它好像继续认为第一个option还是空的,好像没有触发reflow,通过隐藏再显示就能使第一个默认选中,对,这里只能用好像,因为我也只是从外观表现来分析。

二:什么是reflow

页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂,其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。比如DOM元素的添加、修改(内容)、删除( Reflow + Repaint),在我这个场景里面就是增加了select的option选项,但是在IE下面表现出来不能更新默认选中项,而chrome一切正常。

三:代码详细

$.ajax({       
  url : "/vehicle/repairProj/repProj/getFirstProName.action",
  type : "GET",
  success : function(res){
  if(res != null){
     var element = document.getElementById();
  element.style.display = "none";   //设置为隐藏,为了下次触发reflow;
  var fragment = document.createDocumentFragment(); //创建文档碎片,用于dom添加中间环节,减少reflow次数
  $.each(res, function(key, value) { 
  var opt = document.createElement('option');
  opt.value = key;
  opt.text = value;
  fragment.appendChild(opt);
  if(idValue==""){
  idValue=key;
  }
  });
  element.appendChild(fragment);
  setTimeout( function(){         //20毫秒之后触发select的显示,,触发reflow,第一个选项默认被选中.
  element.style.display = "";
  },20);      
  }}
});

参考资料:http://www-archive.mozilla.org/newlayout/doc/reflow.html

四:小结

整个问题解决过程,我只能通过表现来判断好像是没有触发reflow导致的问题,因为我通过触发显示隐藏把问题解决了,至于究竟是不是reflow的问题,也不能定夺,如果你也遇到过类似的问题,欢迎留言交流,我还在迷惑ing

码字很辛苦,转载请注明来自tuy博客《select异步更新option时IE不会更新默认选中项》

评论