ASP.NET Core MVC实现无依赖可编辑组合框及select2布局适配

修复代码属性冲突 #

当前的select元素存在重复id的合规性问题：同一节点上同时声明了id="disciplineSelect"和id="currentFilterOnDiscipline"两个id属性，浏览器解析时仅会识别最后一个id值，极易导致后续JS选择器失效。

• 处理方式：删除多余的disciplineSelect id属性，仅保留和原表单提交逻辑匹配的currentFilterOnDiscipline作为元素唯一标识，无需修改已绑定的asp-for、name属性，原有表单提交逻辑不受影响。

开启可编辑输入能力 #

当前的Select2初始化配置未开启自定义输入开关，默认状态下仅支持从预设下拉选项中选值，无法手动输入自定义内容，需要补充对应配置参数：

$('#currentFilterOnDiscipline').select2({
    placeholder: "Selecteer een discipline",
    theme: "classic",
    allowClear: true,
    tags: true, // 开启标签模式，支持手动输入任意自定义内容
    width: '100%' // 强制控件宽度100%铺满父容器，避免宽度塌陷
});

样式对齐实现 #

Select2初始化时会自动隐藏原生select，生成一套带可编辑输入框的DOM结构，默认样式不会自动适配你之前为原生控件添加的Bootstrap form-control类规则，这是导致相邻筛选控件高度不一致、输入区域无法铺满的核心原因。添加以下自定义覆盖样式，即可实现与会话日期输入框1:1匹配的尺寸、排版效果：

/* 匹配Bootstrap原生输入框的基础边框、高度样式 */
.select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
}

/* 让可编辑输入框完全铺满控件剩余宽度 */
.select2-container--classic .select2-search--inline .select2-search__field {
    width: 100% !important;
    margin: 0;
    border: none;
    outline: none;
    text-align: center;
}

/* 统一文字居中对齐 */
.select2-container--classic .select2-selection__rendered {
    text-align: center;
    line-height: calc(1.5em + 0.75rem);
    padding-left: 0;
}

/* 对齐下拉箭头、清除按钮的垂直位置 */
.select2-container--classic .select2-selection__arrow {
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
}
.select2-container--classic .select2-selection__clear {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

运行适配说明 #

• 整套实现不需要依赖Devexpress、Telerik这类商用付费组件，基于已引入的开源Select2库即可完成，完全兼容ASP.NET Core MVC的原生标签辅助属性
• Select2选中项、手动输入的自定义值会自动同步回隐藏的原生select元素，后端接收参数的字段名、数据格式与之前使用原生下拉的逻辑完全一致，无需调整任何后端代码
• 如果项目使用Bootstrap 5，仅需将上述CSS中的高度、内边距值替换为Bootstrap 5版本下.form-control类的对应参数，即可实现无偏差的样式对齐

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