作者: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在Internet Explorer 8(IE8)的兼容性视图模式下操作Select元素的Options时遇到的bug,以及如何解决这个问题。这个问题涉及到前端开发中的DOM操作和浏览器差异性。 在IE8兼容性视图...
Chosen插件通过增强select和option元素,提供了更美观、更易用的选择体验,尤其在处理大量选项时,其优势更为明显。 一、Chosen插件简介 Chosen插件是由Harvest公司开发的,它将普通的HTML select元素转换为一个...
jQuery提供了一个解决方案,通过动态调整select元素的宽度来适应option的内容,以确保在IE 6/7/8中正确显示所有文本。下面是对这个问题的详细解析和解决方案: 1. **问题分析**: - 在标准浏览器中,下拉框的宽度...
V1.3.6.2版本作为该插件的一个更新迭代,可能包含了一些性能优化、新特性添加或者bug修复。在实际项目中,使用这样的插件可以提升用户体验,使网页界面更加友好。 二、核心功能解析 1. **样式自定义**:jQuery ...
对之前上传过的资源 用div+jq高仿ie6的select表单随内容增加 进行了一个升级,将其做成一个类似插件的形式;...解决了之前版本的option的value没有传入li的bug。 暂时还无法做到让用户随意更改select的宽高功能。
解决方法:JQueryUI的做法是在IE6下当触发弹出层时,将想覆盖住的select隐藏 在IE7及以下 虽然disabled 对 select能起作用,但对select下的option却无效。 解决方法通常是判断浏览器,如果是IE7以下的话,则当...
***bobox是jQuery的一个插件,它允许开发者将普通的<select>元素转换为一个带有下拉菜单的组合框。组合框的特点是用户可以输入文本,也可以从下拉列表中选择一个选项。该插件支持基本的交互功能,如选择下拉项、改变...
Bootstrap Select是一款...总之,Bootstrap Select是Bootstrap框架下的一个强大下拉框组件,它的丰富功能和易用性使得它在Web开发中备受欢迎。通过熟练掌握并灵活运用Bootstrap Select,可以为您的项目增添更多亮点。
4. **兼容性测试**:虽然Select2支持多种浏览器,仍需进行兼容性测试,确保在目标环境下的正常运行。 综上,Select2 4.0.8以其强大的功能和易用性,成为了Web开发中不可或缺的下拉选择工具。开发者可以根据具体需求...
10. **测试**:进行充分的单元测试和集成测试,确保不同操作在各种情况下都能正常工作,防止潜在的bug。 在实际项目中,我们可能还需要考虑更多因素,如性能优化、错误处理和用户反馈等。理解并熟练运用这些技巧,...
需要注意的是,尽管现代浏览器大都遵循相同的DOM标准,但在一些老版本的浏览器,比如旧版IE中,可能会有一些行为上的差异或者bug。因此,在编写跨浏览器的JavaScript代码时,总是要进行充分的测试,确保在各种浏览器...
- optDisabled:检测禁用的`select`元素中的`option`是否被禁用。 - optSelected:检测`option`的`selected`属性是否被正确处理。 - radioValue:检测单选按钮的值。 - reliableHiddenOffsets:检测`display:none`的...
同时,需要引入jQuery库(jquery.js)、Bootstrap的JavaScript文件(bootstrap.js)以及Select2的核心库(select2.full.js)。 ```html {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/...
7. **易于整合**:它可以无缝集成到现有的jQuery或Prototype项目中,且支持数据绑定,如使用AJAX动态加载选项。 在压缩包文件`chosen_v0.14.0`中,可能包含了以下内容: 1. `chosen.css`:这是Chosen的样式文件,...
当使用`this.selectlist=data`更新数据时,Vue无法检测到属性的添加,因为`selectlist`在初始化时没有被声明为响应式。正确的做法是使用`this.$set`方法添加新数据到数组中,例如`this.$set(this.selectlist, 0, ...
多级联动,支持Ajax动态获取数据并缓存数据,动态生成下级select菜单,设置动态生成"option"第一个条目作为提示项,自动选择唯一选项的菜单,设置回调函数在onChange事件触发时获取下拉菜单相关信息。 详细功能及...