JQuery - 动态选择和选项在IE9中不起作用

Question

我有一个动态选择,需要驱动另一个选择,但我似乎无法让它在IE中工作(使用IE9).我在这里看过这篇文章但是(除非我不理解它)这似乎没有帮助:动态相关用jQuery选择,不在IE中工作.

我真的简化了它,以便很容易理解这个问题.我有2个选择,1个驱动另一个.因此,当您在第一个中选择某个内容时,第二个内容会发生变化.对于这个例子,我只是在select中添加一个新项目,即使这在IE中也不起作用:

var mydiv = $("#testdiv");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    $("#f2").append("<option value='t1'>t1</option>");
});

<div id="testdiv"></div>

因此,理论上我们应该从2个选择列表开始,"f2"将在其中选择1个空白选项.

接下来,从"f1"中选择一个项目,它将为"f2"添加一个新选项.

这完全符合我想要的firefox和chrome.在IE中它只是表现得很奇怪.以IE为例:

场景1

1. 我打开页面并检查"f2"选择.它有1个空白值
2. 我在"f1"中选择了一个项目
3. 我检查"f2",它仍然有1个空白值

情景2

1. 我打开页面,不要触摸"f2"选择.
2. 我在"f1"中选择了一个项目
3. 我检查"f2",它有2个项目!
4. 我在"f1"中选择了另一个项目
5. 我检查"f2"它还有2个项目？!？

所以它看起来像我第一次激活选择控件时它必须对现有的HTML做一些事情......现在这就是它将从这里开始渲染......

这让我疯了,我做错了什么？!？

注意:不确定它是否重要,但两个选择都是使用javascript/jquery动态生成的,因为在异步调用完成之前我不知道它们的值.

由于通过评论进行调查而更新了问题...似乎我关于动态创建对象的最后一个注释对于重新创建问题至关重要

Answer 1

我发现了另一种更容易的解决方法.

使用append()或html()设置动态创建的选项的选项,然后只需隐藏()和show()选择.

var mydiv = $("#testdiv");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    $("#f2").append("<option value='t1'>t1</option>").hide().show();
});

<div id="testdiv"></div>