JQuery操作Select的Options的Bug(IE8兼容性视图模式)
更新时间：2013年04月21日 15:39:56 作者：
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 += "<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);
}
}
}
通过开发人员工具查看，下拉列表框是有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);
}
}
}
您可能感兴趣的文章:
- jQuery获取select选中的option的value值实现方法
- JQuery动态添加Select的Option元素实现方法
- JS & JQuery 动态添加 select option
- jQuery操作Select的Option上下移动及移除添加等等
- JQuery中对Select的option项的添加、删除、取值
- 删除select中所有option选项jquery代码
- 浅析jQuery对select操作小结(遍历option,操作option)
- jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
- jquery操作select option 的代码小结
- jQuery动态产生select option下拉列表
相关文章
这篇文章主要介绍了jQuery实现下拉框选择图片功能,可实现带图片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以参考下2015-08-08
jQuery使用有一段时间了，但是有一些API的实现实在想不通。小编参考相关资料源码，现在把我的学习过程和收获分享给大家2016-05-05
jquery 将当前时间转换成yyyymmdd格式的实现方法
下面小编就为大家带来一篇jquery 将当前时间转换成yyyymmdd格式的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考2016-06-06
这篇文章主要介绍了jQuery文本框得到与失去焦点动态改变样式效果,涉及jQuery针对页面表单元素样式的动态操作技巧,需要的朋友可以参考下2016-09-09
jQuery.Highcharts.js绘制柱状图饼状图曲线图
这篇文章主要介绍了jQuery.Highcharts.js绘制柱状图饼状图曲线图的方法，非常的实用，小伙伴们可以直接拿到项目中使用。2015-03-03
Jquery.addClass无效的情况想必有很多的朋友都有遇到过吧，下面为大家详细的分析下，感兴趣的朋友可不要错过了哈2013-09-09
这篇文章主要介绍了JQuery异步post上传表单数据标准化模板，主要分享详细的代码，具有一的的知识参考性，需要的小伙伴可以参考一下2022-02-02
这篇文章主要介绍了jQuery实现自动调整字体大小的方法,涉及jQuery针对页面属性与样式动态操作的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了jQuery中:first选择器用法,实例分析了:first选择器的功能、定义及匹配元素时的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
下面小编就为大家带来一篇浅谈jQuery添加的HTML,JS失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论