MVC中多选下拉框的选择与取消选择异常问题

我在MVC项目里做了一个多选下拉框，用来实现多用户名选择的功能。选择多个用户名的时候一切正常，但当我在UI界面取消选中其中一个已选的用户名时，界面上明明显示已经移除了这个选项，但在代码层面，被取消选中的用户名并没有被移除，实在搞不懂哪里出问题了，有没有大佬能帮忙解决下？

我用到的多选下拉框Razor代码如下：

<div id="dvUserNames" class="col-md-6"> 
    @if (Model.UserNameCollection != null) { 
        @Html.DropDownListFor(model => model.UserId, 
            new SelectList(Model.UserNameCollection, "UserId", "UserName", Model.UserId), 
            new { @class = "chosen-select", multiple = "multiple", @style = "width:6.0cm" }) 
    } 
</div>

按钮点击事件里的jQuery代码是这样的：

var UserNameCollection=[]; 
for (var i = 0; i < $('#dvUserNames :selected').length; i++) { 
    UserNameCollection.push($('#dvUserNames :selected')[i].value); 
}

（附多选下拉框取消选中状态截图）

感谢各位的帮助！

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