浏览器错误：选择下拉列表元素的add（）方法无法按预期工作（IE）

最新推荐文章于 2023-11-30 15:05:12 发布

翻译最新推荐文章于 2023-11-30 15:05:12 发布 · 229 阅读

文章标签：

#javascript #ViewUI

探讨了在IE浏览器中，使用JavaScript操作Select下拉列表的Add方法时遇到的兼容性问题，包括如何正确地在列表末尾或指定位置添加Option元素。

问题

select对象的add方法不会将选项附加到列表的末尾。

浏览器

IE浏览器

例

用于在选择下拉列表的末尾附加一个option元素的Javascript代码：

var opt = document.createElement("option");
opt.name = "optName";
opt.value = "optValue";
var selObj = document.getElementById("seltest");
selObj.add(opt,null);

解

IE不支持W3C add方法，因此我们必须使用try / catch来使用其专有方法：

var opt = document.createElement("option");
opt.name = "optName";
opt.value = "optValue";
var selObj = document.getElementById("seltest");
try {
 selObj.add(opt,null);
} catch (e) {
   selObj.add(opt); // for IE only
  }

-------------------------------------------------- -------------------------------------------------- - 问题

选择对象的添加方法不会在列表中添加选项。这类似于先前的问题（附加到列表的末尾），但解决方案略有不同。

浏览器

IE浏览器

例

用于将option元素添加到select下拉列表的Javascript代码：

var opt = document.createElement("option");
opt.name = "optName";
opt.value = "optValue";
var selObj = document.getElementById("seltest");
// let's say we want to add before the currently selected option
var optToAddBefore = selObj.options[selObj.selectedIndex];
selObj.add(opt,optToAddBefore);

解

IE不支持W3C add方法，因此我们必须使用try / catch来使用其专有方法。对于第二个参数，我们必须传递选定的索引，而不是option元素：

var opt = document.createElement("option");
opt.name = "optName";
opt.value = "optValue";
var selObj = document.getElementById("seltest");
// let's say we want to add before the currently selected option
var optToAddBefore = selObj.options[selObj.selectedIndex];
try {
 selObj.add(opt,optToAddBefore);
} catch (e) {
   selObj.add(opt,selObj.selectedIndex); // for IE only
  }