MVC中的多选下拉选择和取消选择问题

Posted 2023-05-08

【中文标题】MVC中的多选下拉选择和取消选择问题

【英文标题】：Multiselect dropdown select and deselect issue in MVC

【发布时间】：2021-08-26 12:10:21

【问题描述】：

我正在使用多选下拉菜单来选择多个选项。当我尝试添加多个用户名时，它工作正常。当我尝试从 UI 的下拉列表中取消选择一个选定的用户名时，它看起来正在删除，但从代码级别取消选择的用户名不会被删除。 任何人都可以帮我解决这个问题。我正在使用下面的代码进行多选下拉。

<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); 

MultiSelect DropDown Deselected Image

谢谢 文卡特斯瓦拉罗

【问题讨论】：

“从代码级别”是什么意思？您具体在哪里观察到这个结果？这和 jQuery 有什么关系？

cmets 中的代码不是很有用。请更新问题以包含相关代码并具体说明失败的原因。如果在 javascript 中发现问题，您还应该更新问题以包含相关 JavaScript 的可运行代码 sn-p 以及该 JavaScript 运行的生成的客户端 HTML。

class = "chosen-select" 您是否将其转换为jquery-chosen 框？还是只使用样式？如果使用jquery-chosen，则需要使用它的API。

@Venkateswararao：你在哪里使用显示的 JavaScript 代码？这只是在页面加载时发生一次吗？还是响应特定事件？提供minimal reproducible example 来演示问题很重要。

@David 我在按钮点击事件中使用 javascript 代码。

【参考方案1】：

添加记录的时候是push到数组，但是取消选中的时候需要拼接用户数组

UserNameCollection.splice([Index of removed username]);

【讨论】：

是否有任何取消选择时间的事件。我尝试使用 onchange 事件，但每次选择或取消选择时间都会调用它。如何知道它是选择还是取消选择。请你帮帮我。跨度>

您可以在 onchange 处理程序中进行比较

例如如果UserNameCollection 包含不在$('#dvUserNames :selected') 中的记录，则从UserNameCollection 对其进行切片

OP 表示他们在单击按钮时运行代码，因此没有现有的数组可以拼接。 minimal reproducible example sn-p 可以说明这一点。

@DrollDread 同意它需要来自 OP 的更多信息