jQuery多选下拉框选项迁移功能：最后一个选项无法移除的问题求助

看起来你遇到的问题根源在于SelectedUsers下拉框change事件里的forceSelect逻辑——这行代码会在你移除选项时，强制选中右侧所有剩余的选项，当只剩最后一个选项时，这个操作会干扰正常的DOM移除流程。

问题分析 #

在你的右侧下拉框事件处理中：

let forceSelect = $("#SelectedUsers option");
// ...
$(forceSelect).prop('selected', true)

这行代码会把右侧所有剩下的选项都设为选中状态。当右侧只剩最后一个选项时，用户选中它准备移回左边，代码会先克隆它到左侧，然后再次把这个唯一的选项设为选中，紧接着再尝试移除它。这个额外的选中操作会和浏览器的事件处理逻辑冲突，导致最后一个选项无法被正确移除。

而且更重要的是：你只需要保证右侧下拉框中的选项在添加时带有selected属性（你已经通过clone().prop('selected', true)实现了），这样表单提交时就能正确获取到所有右侧的选项，完全不需要强制保持所有选项都处于选中状态。

修改后的代码 #

去掉多余的forceSelect相关逻辑即可解决问题：

(function () {
 $("#ListAllUsers").change(function (e) {
 let selectedOpts = $("#ListAllUsers option:selected");
 if (selectedOpts.length == 0) {
 e.preventDefault();
 }
 // 添加到右侧时设置selected属性，确保表单提交能捕获到
 $("#SelectedUsers").append($(selectedOpts).clone().prop('selected', true));
 $(selectedOpts).remove();
 e.preventDefault();
 });
 $("#SelectedUsers").change(function (e) {
 let selectedOpts = $("#SelectedUsers option:selected");
 if (selectedOpts.length == 0) {
 e.preventDefault();
 }
 // 克隆到左侧，无需设置selected（左侧不需要提交）
 $("#ListAllUsers").append($(selectedOpts).clone().prop('selected', false));
 // 直接移除选中的选项
 $(selectedOpts).remove();
 e.preventDefault();
 });
})(jQuery);

额外优化建议 #

如果担心元素的事件或数据丢失，可以用detach()代替remove()，但在你的场景中因为是克隆后移除原元素，所以remove()已经足够用了。另外，你也可以给两个下拉框的移动操作添加简单的动画效果，提升用户体验，但这不是必须的。

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