热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

JQuery在IE8兼容性视图模式下操作Select的Options的Bug在本文进行重现并给出详细的解决方法,感兴趣的朋友可以参考下哈,希望对你有所帮助
Bug现场:


通过开发人员工具查看,下拉列表框是有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 += "";
}
}
$(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);
}
}
}

推荐阅读
author-avatar
哀公家园_678
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有