Question

我有一个HTML“select”元素，我正在用这样的代码动态更新：

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”属性中没有特殊字符（＆amp;，＆lt;，＆gt;），“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'宽度'样式，而不是让浏览器从其内容中猜出宽度。

Answer 5

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

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

5 个答案: