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


Posted in Javascript onApril 21, 2013

Bug现场:

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

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

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


通过开发人员工具查看,下拉列表框是有Options的,但你点击选择的时候却什么也不显示。

重现步骤
该问题发生在级联下拉框的情况,第一个列表改变,第二个列表的值跟着改变!
本例中使用以下方法绑定数据:

//绑定下拉框 
//ctnSelector:下拉框ID,带#号, 
//jsonData:JSON数据, 
//txtField:文本字段名称, 
//valField:值字段名称, 
//strOptions:默认填加的项 
function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions) { 
if ($(ctnSelector).length == 0) { return false; }; 
$(ctnSelector).html(''); 
var optList = strOptions; 
if (typeof (jsonData) != undefined) { 
for (var jitem in jsonData) { 
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") { 
continue; //解决flareJ.Base.js导致的问题。 
} 
optList += "<option value='" + jsonData[jitem][valField] + "'>" + jsonData[jitem][txtField] + "</option>"; 
} 
} 
$(ctnSelector).html(optList); 
}

正常加载时不会出现任何问题!
但当因第一个下拉框的值改变,而第二个下拉框的选项都被清空了,
然后你还是去点第二个下拉框试图去选择一项后,
再去更改第一个下拉框的选项,
你会发现之前第二个下拉框中显示的与第一个下拉框对应的项却怎么也显示不出来了,
只能显示第一个,或是通过脚本设置为选中的一个!

解决方案
使用DOM的方法去操作Options,代码如下:

//绑定下拉框 
//ctnSelector:下拉框ID,带#号, 
//jsonData:JSON数据, 
//txtField:文本字段名称, 
//valField:值字段名称, 
//strOptions:默认填加的项 
function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions) { 
if ($(ctnSelector).length == 0) { return false; }; 
$(ctnSelector).empty(); 
var sel = $(ctnSelector).get(0); 
var newOpt = $(strOptions); 
var newOption1 = document.createElement("OPTION"); 
newOption1.text = newOpt.text(); 
newOption1.value = newOpt.val(); 
sel.options.add(newOption1); 
if (typeof (jsonData) != undefined) { 
for (var jitem in jsonData) { 
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") { 
continue; //解决flareJ.Base.js导致的问题。 
} 
var newOption = document.createElement("OPTION"); 
newOption.text = jsonData[jitem][txtField]; 
newOption.value = jsonData[jitem][valField]; 
sel.options.add(newOption); 
} 
} 
}
Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
Jquery submit()无法提交问题
Apr 21 #Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 #Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 #Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 #Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 #Javascript
javascript中onclick(this)用法介绍
Apr 19 #Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 #Javascript
You might like
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python实现从ftp服务器下载文件
2020/03/03 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
租房协议书
2014/09/12 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
委托公证书格式
2015/01/26 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
JAVA springCloud项目搭建流程
2022/05/11 Java/Android