如何在 IE 中动态更新 HTML“选择”框答案

【问题标题】：How to update HTML "select" box dynamically in IE如何在 IE 中动态更新 HTML“选择”框
【发布时间】：2008-11-04 09:47:44
【问题描述】：

我有一个 HTML“选择”元素，我正在使用如下代码动态更新它：

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt = document.createElement('option');
  opt.value = data[i].id;
  opt.text = data[i].name;
  selector.appendChild(opt);
}

在 Firefox 中运行良好，但 IE7 不会调整列表框的大小以适应新数据。如果列表框最初是空的（在我的情况下），您几乎看不到我添加的任何选项。有一个更好的方法吗？或者一种修补它以在 IE 中工作的方法？

【问题讨论】：

标签： html internet-explorer html-select

【解决方案1】：

设置选项对象的innerHTML 属性，而不是它们的text。

var selector = document.getElementById('selectorId');    
for (var i = 0; i < data.length; ++i)
{
  var opt       = document.createElement('option');
  opt.value     = data[i].id;
  opt.innerHTML = data[i].name;
  selector.appendChild(opt);
}

在 IE6 上工作，刚刚测试过。在 FF3 上不会中断，所以我想就是这样。

（我选择“innerHTML”是因为它可以跨浏览器使用。要设置文字文本，您必须在 IE 上使用“innerText”，在 FF 上使用“textContent”，您可能需要在其他地方进行测试好吧。只要“name”属性中没有特殊字符（&、），“innerHTML”就足够了。）

【讨论】：

opt.text 是回到Netscape somethingancient.0 的所有JavaScript 浏览器都支持的标准属性，并且对特殊字符没有问题。 innerHTML 是一种非标准的 IE 扩展，尽管它被所有较新的浏览器采用。我不明白这真的是一场胜利。
尝试一下，看看有什么不同。无论标准与否，它都可以在主流浏览器中使用，并且可以解决特定问题。我指出你也可以做不同的事情。
说到标准：我看到人们做（并推荐）令人难以置信的疯狂事情来绕过链接目标属性已脱离标准的事实。它并没有使他们的代码更好，它只是使它对 SGML 解析器“有效”。耶。

【解决方案2】：

您不需要为此操作 DOM。试试这个

var selector = document.getElementById('selectorId');  
for (var i = 0; i < data.length; ++i) {
    selector.options[selector.options.length] = new Option(data[i].name, data[i].id);
}

【讨论】：

不是如何操纵 DOM 的？ :-) 但我必须承认，它完美无缺。 +1
我指的是您稍后插入到 DOM（appendChild）中的 document.createElement（创建任意元素）。无论如何，有不同的方法可以解决这个特定问题。

【解决方案3】：

添加选项元素后，将select.style.width强制为auto，即使它已经是auto。

如果这不起作用，请将select.style.width 清除为""，然后再次将select.style.width 恢复为auto。

这使得 Internet Explorer 重新计算 select 元素的最佳宽度。

【讨论】：

【解决方案4】：

明确设置选择框的宽度，例如使用。 CSS“宽度”样式，而不是让浏览器从其内容中猜测宽度。

【讨论】：

【解决方案5】：

您可以尝试从生成的 html 代码中替换整个 select 元素，或者从 DOM 中删除元素并读取它。

【讨论】：