如何更新HTML“选择”在IE中动态框 [英] How to update HTML "select" box dynamically in IE

问题描述

  var我有一个HTMLselect元素，我正在用代码这样动态更新：
 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）; 
 
 $ / code> 

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

解决方案

设置 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，只是经过测试。

$ b

（我选择了innerHTML，因为这适用于浏览器。要设置文本文本，您必须在IE上使用innerText，在FF上使用textContent，并且你可能需要在其他地方测试它，只要在name中没有特殊字符（&，<>），属性，innerHTML就足够了。）

I've got an HTML "select" element which I'm updating dynamically with code something like this:

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

Works fine in Firefox, but IE7 doesn't resize the list box to fit the new data. If the list box is initially empty (which it is in my case), you can hardly see any of the options I've added. Is there a better way to do this? Or a way to patch it up to work in IE?

解决方案

Set the innerHTML property of the option objects, instead of their 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);
}

Works on IE6, just tested. Does not break on FF3, so I guess this is it.

(I chose "innerHTML" because this works across browsers. To set the literal text, you have to use "innerText" on IE, and "textContent" on FF, and you probably have to test it elsewhere as well. As long as there are no special characters (&, <, >) in the "name" properties, "innerHTML" will be enough.)

这篇关于如何更新HTML“选择”在IE中动态框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！