`
zccst
  • 浏览: 3315897 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在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"));



如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    JQuery操作Select的Options的Bug(IE8兼容性视图模式)

    本文主要讨论的是一个针对JQuery在Internet Explorer 8(IE8)的兼容性视图模式下操作Select元素的Options时遇到的bug,以及如何解决这个问题。这个问题涉及到前端开发中的DOM操作和浏览器差异性。 在IE8兼容性视图...

    Jquery select 插件 chosen

    Chosen插件通过增强select和option元素,提供了更美观、更易用的选择体验,尤其在处理大量选项时,其优势更为明显。 一、Chosen插件简介 Chosen插件是由Harvest公司开发的,它将普通的HTML select元素转换为一个...

    jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全

    jQuery提供了一个解决方案,通过动态调整select元素的宽度来适应option的内容,以确保在IE 6/7/8中正确显示所有文本。下面是对这个问题的详细解析和解决方案: 1. **问题分析**: - 在标准浏览器中,下拉框的宽度...

    jQuery Select 下拉单选框模拟插件 V1.3.6.2.zip

    V1.3.6.2版本作为该插件的一个更新迭代,可能包含了一些性能优化、新特性添加或者bug修复。在实际项目中,使用这样的插件可以提升用户体验,使网页界面更加友好。 二、核心功能解析 1. **样式自定义**:jQuery ...

    用div+jq高仿ie6的select表单随内容增加-2012-11-1

    对之前上传过的资源 用div+jq高仿ie6的select表单随内容增加 进行了一个升级,将其做成一个类似插件的形式;...解决了之前版本的option的value没有传入li的bug。 暂时还无法做到让用户随意更改select的宽高功能。

    SELECT在浏览器中相关Bug整理

    解决方法:JQueryUI的做法是在IE6下当触发弹出层时,将想覆盖住的select隐藏 在IE7及以下 虽然disabled 对 select能起作用,但对select下的option却无效。 解决方法通常是判断浏览器,如果是IE7以下的话,则当...

    jquery.combobox中文api和例子,修复了上面的小bug

    ***bobox是jQuery的一个插件,它允许开发者将普通的&lt;select&gt;元素转换为一个带有下拉菜单的组合框。组合框的特点是用户可以输入文本,也可以从下拉列表中选择一个选项。该插件支持基本的交互功能,如选择下拉项、改变...

    bootstrap-select下拉框

    Bootstrap Select是一款...总之,Bootstrap Select是Bootstrap框架下的一个强大下拉框组件,它的丰富功能和易用性使得它在Web开发中备受欢迎。通过熟练掌握并灵活运用Bootstrap Select,可以为您的项目增添更多亮点。

    select2-4.0.8.zip

    4. **兼容性测试**:虽然Select2支持多种浏览器,仍需进行兼容性测试,确保在目标环境下的正常运行。 综上,Select2 4.0.8以其强大的功能和易用性,成为了Web开发中不可或缺的下拉选择工具。开发者可以根据具体需求...

    jQuery实现双向选择列表框

    10. **测试**:进行充分的单元测试和集成测试,确保不同操作在各种情况下都能正常工作,防止潜在的bug。 在实际项目中,我们可能还需要考虑更多因素,如性能优化、错误处理和用户反馈等。理解并熟练运用这些技巧,...

    javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

    需要注意的是,尽管现代浏览器大都遵循相同的DOM标准,但在一些老版本的浏览器,比如旧版IE中,可能会有一些行为上的差异或者bug。因此,在编写跨浏览器的JavaScript代码时,总是要进行充分的测试,确保在各种浏览器...

    jQuery 源码分析笔记(5) jQuery.support

    - optDisabled:检测禁用的`select`元素中的`option`是否被禁用。 - optSelected:检测`option`的`selected`属性是否被正确处理。 - radioValue:检测单选按钮的值。 - reliableHiddenOffsets:检测`display:none`的...

    JS组件Bootstrap Select2使用方法解析

    同时,需要引入jQuery库(jquery.js)、Bootstrap的JavaScript文件(bootstrap.js)以及Select2的核心库(select2.full.js)。 ```html {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/...

    chosen下拉多选

    7. **易于整合**:它可以无缝集成到现有的jQuery或Prototype项目中,且支持数据绑定,如使用AJAX动态加载选项。 在压缩包文件`chosen_v0.14.0`中,可能包含了以下内容: 1. `chosen.css`:这是Chosen的样式文件,...

    解决vue动态下拉菜单 有数据未反应的问题

    当使用`this.selectlist=data`更新数据时,Vue无法检测到属性的添加,因为`selectlist`在初始化时没有被声明为响应式。正确的做法是使用`this.$set`方法添加新数据到数组中,例如`this.$set(this.selectlist, 0, ...

    LinkageSel Javascript 无限多级联动下拉菜单

    多级联动,支持Ajax动态获取数据并缓存数据,动态生成下级select菜单,设置动态生成"option"第一个条目作为提示项,自动选择唯一选项的菜单,设置回调函数在onChange事件触发时获取下拉菜单相关信息。 详细功能及...

Global site tag (gtag.js) - Google Analytics