IE11中DropdownList的jQuery remove()方法失效问题求助

这个IE11的坑我之前也踩过！问题根源在于IE11对DOM变更的事件处理逻辑和现代浏览器差异很大——你用jQuery的remove()删掉<select>里的<option>后，虽然原生表单元素的DOM已经更新了，但那个用来模拟下拉显示的<ul>/<li>组件并没有感知到这个变化，所以才会出现“DOM里选项没了，但UI列表还在”的情况。

给你几个可行的解决思路：

1. 优先使用组件的原生API操作选项 #

如果你的Razor DropdownList是基于某个UI组件库（比如Bootstrap Select、jQuery UI Selectmenu这类美化插件）实现的，不要直接操作原生<option>元素，而是调用组件提供的移除选项方法。比如：

// 假设用的是Bootstrap Select
$('#yourDropdownId').selectpicker('remove', '[value="要移除的值"]');
$('#yourDropdownId').selectpicker('refresh');

这种方式会让组件自动同步原生<select>和UI面板的内容，从根源上避免IE11的兼容问题。

2. 手动同步UI面板（针对自定义/无API的组件） #

如果是项目自定义的下拉组件，或者没有现成的API可用，那在移除原生选项后，需要手动找到对应的<ul>并删除对应的<li>：

// 1. 移除原生select的选项
var targetValue = "要移除的选项值";
$('#yourSelectId option[value="' + targetValue + '"]').remove();

// 2. 针对IE11手动删除对应的li
if (!!window.MSInputMethodContext && !!document.documentMode) { // 检测是否是IE11
  $('#yourDropdownUlId li[data-value="' + targetValue + '"]').remove();
}

这里的data-value是假设你的<li>标签用这个属性和原生<option>的value做关联，实际要根据项目里的DOM结构调整。

3. 手动触发组件的更新事件 #

有些组件会监听特定事件来同步UI，你可以在移除选项后手动触发这些事件，比如：

$('#yourSelectId').remove('option[value="xxx"]').trigger('change');

如果组件监听了change事件，这个操作可能会让它重新读取原生<select>的内容并更新UI。

为什么IE11会出现这个问题？ #

现代浏览器会自动触发DOMNodeRemoved这类DOM突变事件，UI组件可以通过监听这些事件来同步UI；但IE11对这类事件的支持不完善，很多时候不会触发，导致组件无法感知到原生<select>的变化，所以必须手动干预。

内容的提问来源于stack exchange，提问作者Adam