Question

显然IE（10）不喜欢这段代码：

$('size_list').innerHTML = '<form id="dropdown_menu"><select id="dropdown_options"></select></form>';

未生成下拉菜单。我收到Unknown Run Time错误，这真的很“有帮助”。下一行代码是：

$('dropdown_options').innerHTML = '<option>Choose size</option>';

但是当我调试时 - 我甚至不到这里。

'size_list'元素只是一个简单的空div：

<div id="size_list" style="float:right; margin-top: -22px;"></div>

我发现一些信息表明.innerHTML并不真正适用于IE，但我在我的脚本中有很多其他地方，我通过{{1分配更大的HTML块到div个元素所有的作品。除了上面指定的下拉表格。

Answer 1

试试这个：

$('#size_list').html('<form id="dropdown_menu"><select id="dropdown_options"></select></form>');
$('#dropdown_options').html('<option>Choose size</option>');

你不能用锤子作为扳手......

或使用document.getElementById('size_list').innerHTML或使用$('#size_list').html()

不要忘记在jQuery中将#放在id选择器之前，在类选择器之前放置.，否则jQuery会尝试查找不存在的<size_list>标记DOM树。

Answer 2

首先，虽然使用直接插入html方法添加选择选项可能很方便，但它很少普遍适用。向选择添加选项的防弹方法是在循环中一次构建一个选项，分配它们的值并以老式的方式标记。

var form = new Element('form', {id: 'dropdown_menu' });
var picker = new Element('select', {id: 'dropdown_options', size: 1 });
$('size_list').insert(form);
form.insert(picker);
picker.options[picker.options.length] = new Option('Choose size', '');
// want to add a list of elements in a loop?
$w('Foo Bar Baz').each(function(val){
  picker.options[picker.options.length] = new Option(val, val);
});

IE从来没有优雅地处理过select元素的修改，当我第一次尝试做这类事情时，这可以追溯到IE 5。

prototype.js innerHTML不适用于IE

2 个答案: