Question

我有一个动态选择，需要驱逐另一个选择，但我似乎无法让它在IE中工作（使用IE9）。我在这里看过这篇文章但是（除非我不理解）这似乎没有帮助：Dynamic Related Selects with jQuery, not work in 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

我打开页面并检查“f2”选择。它有1个空白值
我在“f1”
我检查“f2”并且它仍有1个空白值

情景2

我打开页面，不要触摸“f2”选择。
我在“f1”
我检查“f2”，它有2个项目！
我在“f1”
我检查“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>

Answer 2

想出来。在一些网站上阅读有关IE中选择的一些错误，并且必须使用div作为解决方法。所以解决方案是每次要刷新列表时重新发布div中的html。像这样：

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

...

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

重要的部分是“testdiv2”并用“tempdiv”中的html填充它。可能是一个更简洁的方法来做到这一点，但同时上述工作对我来说。这是jsfiddler中的一个有效解决方案：http://jsfiddle.net/VHPt5/4/

<强>更新

此外，与@Ingenator在以下不同答案中的评论中发布的内容略有不同。而不是像这样替换HTML：

$("#f2").appendTo(tempdiv);
$("#testdiv2").html($(tempdiv).html());

您可以清除原始div并重新附加它：

$("#testdiv2").clear();
$("#f2").appendTo($("#testdiv2"));

最终，同样的解决方案，但删除生成tempdiv的需要，以替换第一个div的html。

此处的解决方案：http://jsfiddle.net/cAr57/3/

Answer 3

    $(document).ready(function () {
        $("#fieldtype1").append($('<option />', { 'text': 'n', 'value': 'n' }));

        $("#field1").on('change', function () {
            $("#fieldtype1").html('');

            var data = [{ 'name': '1', 'value': '1' }, { 'name': '2', 'value': '2' }, { 'name': '3', 'value': '3' }, { 'name': '4', 'value': '4'}]

            $.each(data, function (i, entity) {
                $("#fieldtype1").append($('<option />', { 'text': entity.name, 'value': entity.value }));
            });

            $("#fieldtype1").trigger('change');
        });
    });



<select id="field1">
    <option value="2">2</option>
    <option value="4">4</option>
</select>
<select id="fieldtype1">
</select>

Answer 4

我使用jquery clone让它工作：

$("#f2").append("<option value='t1'>t1</option>");
var $temp = $("#f2").clone();
$("#f2").html($temp.html());

你的答案对我有所帮助，但我认为因为我的选择处于一个模态中，它表现得很奇怪，这是我能够让它在IE中工作的唯一方法。希望这有助于其他人。

Answer 5

它不能用于IE的原因是因为你试图将一个select元素插入到select元素中，这是有意义的，尽量不要只为新选项添加select标签。

<td>
<select id='dinamicSelect'>
    <option value='2'>dinamicOption1</option>
    <option value='4'>dinamicOption2</option>
</select>
</td>

和jquery

$('#dinamicSelect').html("<select><option value='123'>newOption</option></select>"); //won't work on IE

$('#dinamicSelect').html("<option value='123'>newOption</option>"); //Works

希望这有帮助。

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

5 个答案: