今天郁闷了大半天,从下午1点多开始到4点多,一直被一个JS的问题困扰,后来终于解决,写下作为笔记供自己以后查看吧。
问题背景:自己写了一个多级联动的控件,其实加载数据均采用jQuery的ajax+json方式来调取和填充,方法如下:
$.getJSON("/Ajax/xxx.ashx", { "action": "xx", "parentid": parentId, "r": Math.random() }, function (data) {
$.each(data.codelist, function () {
$("#sel_xx").append(sp.format("<option value=\"{0}\">{1}</option>", this.Id, this.Title));
});
if (_val != "")
$("#sel_xx").val(_val); //设置默认值--就是这在出的问题
$("#sel_xx").change();
});
以上方法在IE7、IE8、火狐、Google等浏览器中测试均正常,默认值可以正常加载。可以在IE6中测试时出现了如下错误:
IETester中:纯IE6中:想必上面的错误大家也碰到过,网上也有很多“解决”办法,但是都不能最终性的解决问题,这里简单的列出作为对比吧(这样映像会更深刻):方法1,使用这种赋值方法:(不能解决)
$("#sel_xx option[value='" + _val + "']").attr("selected", true);
方法2,使用setTimeout延时一下,这种时好时坏,(也不能解决)
setTimeout(function () {
if (_val != "")
$("#sel_xx").val(_val);
$("#sel_xx").change();
}, 100);……还有好多,我一一都试了,无法解决。
问题分析与解决方案:在IE6中出现这种错误的根本原因是,其DOM加载的原理与其它浏览器有些不一样,的确存在延时的问题,上面我们是先向select表单填写了option选项,然后即刻对其设置了selected属性值,在IE6中不能这样做,那么我们如何解决呢?就是在向select表单填写option选项的同时,将selected属性一并赋上。方法如下:$.getJSON("/Ajax/xxx.ashx", { "action": "xx", "parentid": parentId, "r": Math.random() }, function (data) {
$.each(data.codelist, function () {
$("#sel_xx").append(sp.format("<option value=\"{0}\"{2}>{1}</option>", this.Id, this.Title, this.Id == _val ? " selected=\"selected\"" :""));
});
if (_val != "")$("#sel_xx").val(_val);$("#sel_xx").change();
});问题完美解决。上面代码中sp.format是自定义的方法,其功能类似于.net中的format,在此将方法分享给大家://格式化字符串,与.net类似
function format() {
if (arguments.length == 0) return null;
var str = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
str = str.replace(re, arguments[i]);
}
return str;
}