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 相关文章推荐
onpropertypchange
Jul 01 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JSONP原理及简单实现
Jun 08 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
js回到页面指定位置的三种方式
Dec 17 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 各种排序算法实现代码
2009/08/20 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
php依赖注入知识点详解
2019/09/23 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js函数调用的方式
2014/05/06 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
英语道歉信范文
2014/01/09 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
报社实习生自荐信
2014/01/24 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
医院节能减排方案
2014/06/13 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
西双版纳导游词
2015/02/03 职场文书
培训班开班主持词
2015/07/02 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书