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

Question

我有一个动态选择，需要从另一个选择中驱动，但我似乎无法让它在 IE 中工作(使用 IE9)。我在这里看过这篇文章，但是(除非我不理解)这似乎没有帮助:Dynamic Related Selects with jQuery, not work in IE 。

我确实简化了它，以便更容易理解问题。我有 2 个选择，1 个驱动另一个。因此，当您在第一个中选择某些内容时，第二个会发生变化。对于此示例，我只是将一个新项目添加到选择中，即使这在 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()设置动态创建的选择的选项，然后简单地隐藏()和显示()选择。

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>