1

我有一个需要从另一个选择中驱动的动态选择，但我似乎无法让它在 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 动态生成的，因为在异步调用完成之前我不知道它们的值。

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

4

5 回答 5

8

我发现了另一种更简单的解决方法。

使用 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>
于 2013-04-16T14:05:24.777 回答
1

弄清楚了。在一些网站上阅读有关 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/

于 2012-05-14T14:58:31.400 回答
0 
    $(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>
于 2012-05-14T12:49:33.563 回答
0

我使用 jquery clone 让它工作：

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

你的回答对我有帮助，但我认为因为我的选择是在一个模式中它表现得很奇怪，这是我可以让它在 IE 中工作的唯一方法。希望这对其他人有帮助。

于 2013-06-11T00:56:29.463 回答
-1

它在 IE 上不起作用的原因是因为您试图将选择元素插入到选择元素中，这是有道理的，尽量不要只添加新选项的选择标签。

<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

希望这可以帮助。

于 2013-06-05T17:48:10.237 回答