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 相关文章推荐
深入理解Javascript作用域与变量提升
Dec 09 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
JS中的变量作用域(console版)
Jul 18 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
jsTree使用记录实例
2016/12/01 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
tab栏切换原理
2017/03/22 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python常见数制转换实例分析
2015/05/09 Python
代码分析Python地图坐标转换
2018/02/08 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
劳资专员岗位职责
2013/12/27 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Python OpenCV 图像平移的实现示例
2021/06/04 Python