html - 如何在 IE 中动态更新 HTML“选择”框

Question

我有一个 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 中工作的方法？

Answer 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”就足够了。）

Answer 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);
}

Answer 3

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

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

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

Answer 4

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

Answer 5

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