如何从Bootstrap Multi-Select多选组件取值写入SQL并实现正常回显

问题原因 #

• ASP.NET Tag Helper 对多选 select 组件的 asp-for 绑定，默认要求对应属性为集合类型（如 List<string>、int[]），如果你的 SCusernominal 是单个字符串/数值类型，Tag Helper 只会匹配第一个值相等的 <option> 并添加 selected 标记，这就是你只看到第一个选中项的核心原因。
• 提交表单时，多选 select 会传递多个同名参数，后台如果用单个字段接收，也只会取到第一个值，导致只能存入第一个 ID 到 SQL。

解决方案 #

1. 数据存储与接收调整 #

如果你的 SQL 字段设计为存储逗号分隔的选中 ID 字符串，调整如下：

• 模型层可临时用集合类型接收前端多选值，存储时拼接为字符串：

// 模型属性调整
public List<string> SCusernominal { get; set; }

// 存入SQL前的处理逻辑
string sqlSaveValue = string.Join(",", SCusernominal);
// 把sqlSaveValue写入对应SQL字段即可

2. 选中项回显处理 #

适配 selectpicker 组件

前端初始化组件时，把从 SQL 取出的逗号分隔字符串拆为数组，主动赋值给组件：

// 假设后端把SQL存储的逗号分隔值传递到前端，赋值给selectedValue变量
let selectedValue = '@Model.SqlSavedSCusernominal';
let selectedIds = selectedValue ? selectedValue.split(',') : [];

// selectpicker赋值并刷新
$('#SCusernominal').selectpicker('val', selectedIds);
$('#SCusernominal').selectpicker('refresh');

适配 select2 组件（标签形式展示选中项）

初始化 select2 时开启多选配置，赋值后触发 change 事件即可自动渲染标签样式：

let selectedValue = '@Model.SqlSavedSCusernominal';
let selectedIds = selectedValue ? selectedValue.split(',') : [];

$('#SCusernominal').select2({
  multiple: true,
  width: '100%'
  // 其他自定义配置按需添加
}).val(selectedIds).trigger('change');

可选兼容方案 #

如果不想修改模型属性类型，可以去掉 select 标签上的 asp-for 属性，完全通过前端 JS 控制选中值和提交逻辑，避免 Tag Helper 自动生成的 selected 属性只绑定第一个值。

对应原代码示例 #

<div class="form-group">
     <label asp-for="SCusernominal" class="control-label"></label><br />
     <select asp-for="SCusernominal" asp-items="ViewBag.USER_FINAL" class="form-control selectpicker" multiple="multiple" id="SCusernominal" data-actions-box="true" data-size="5" data-width="100%"></select>
</div>

原组件截图 #

内容的提问来源于stack exchange，提问作者Isaias Pereira Machado