Question

我有2个下拉菜单，用于分类，一个用于子类别。更改类别下拉列表时，子类别下拉列表将使用jQuery / ajax更新以显示新的子类别。它在Chrome中运行良好但IE在通过jQuery更新后不显示新值。奇怪的是，在选择新选项后会显示正确的文本，但是当我将列表拉下来时，它会显示旧文本。

这是我在类别更改时清空和重新填充子类别下拉列表的方式：

   $('#testselectsubcat').empty().append(new Option("Pick a subcategory", 0));

   $.each(subcategories, function (index, subcat) {
       $('#testselectsubcat').append(new Option(subcat.name, subcat.id));
   });

编辑：忘了这部分，可能很重要。只有在加载页面后使用jQuery添加的下拉列表才会出现此问题。我使用.append（）和子类别下拉列表使用.after（）将类别下拉列表添加到页面。

如何让它在IE中运行？

Answer 1

好吧，你必须清除子类别下拉，就像这样

// C#:
subcategories.Items.Clear();
// and loaded with new data
 ....

// or clear or empty it using jQuery
 $('#subcategories').chilren().remove();
  $('#subcategories').empty();

Answer 2

显然是IE doesn't work using the append method with new Option()

您可以尝试附加$('<option/>').text(x).val(y)，如：

$('#testselectsubcat').empty().append(
    $('<option/>').val(0).text("Pick a subcategory")
);

$.each(subcategories, function (index, subcat) {
    $('<option/>').val(subcat.id).text(subcat.name).appendTo('#testselectsubcat');
});

或see here了解使用new Option()解决IE的其他方法

在IE中使用jQuery更改后，选择列表文本显示旧值

2 个答案: