在IE9下jquery添加select的option的bug

作者：zccst


还原场景：
在IE9下，先在select追加一个option，再设select的默认值，当然都是使用jQuery。
（IE7/8/兼容模式，非IE浏览器都没有问题）

//如果是增量类型，且当前长度是2则追加每隔数小时的选项	
if(this.$el.find("select[name='updateFrequency']").find("option").length === 2){
	this.$el.find("select[name='updateFrequency']").append("<option value='3'>每隔数小时</option>"));
}


//给更新频率设值默认选项
//这种方式不行
this.$el.find("select[name='updateFrequency']").val(template.incrementFrequency);

//这种方式OK
//this.$el.find("select[name='updateFrequency']").find("option[value="+template.incrementFrequency+"]").prop("selected",true);

问题出在那里？问题出在这行
this.$el.find("select[name='updateFrequency']").append("<option value='3'>每隔数小时</option>"));

原因是：
IE9的解析原理与其他不同，


参考网址：
http://www.cnblogs.com/tinyphp/archive/2013/01/17/2865014.html
http://www.blogjava.net/CopyHoo/articles/246501.html


改进办法：

//如果是增量类型，且当前长度是2则追加每隔数小时的选项
if(this.$el.find("select[name='updateFrequency']").find("option").length === 2){
	this.$el.find("select[name='updateFrequency']")[0].options.add(new Option("每隔数小时","3"));
}


//给更新频率设值默认选项
//这种方式OK
this.$el.find("select[name='updateFrequency']").val(template.incrementFrequency);

//这种方式OK
//this.$el.find("select[name='updateFrequency']").find("option[value="+template.incrementFrequency+"]").prop("selected",true);

最后再次注意：
this.$el.find("select[name='updateFrequency']")[0].options.add(new Option("每隔数小时","3"));



如果您觉得本文的内容对您的学习有所帮助，您可以微信：