如何根据加载时的强制选中值修改Select2下拉框的边框或文本颜色

你的代码存在几个关键问题导致样式无法生效，以下是修正后的完整方案：

1. 核心错误点 #

• 值获取语法错误：错误地将后台值当作jQuery选择器处理，正确做法是直接获取后台控件的SelectedValue和HiddenField的Value，不需要加#前缀。
• Select2初始化时机错误：selectionCssClass需要在Select2初始化时配置，初始化后再次调用select2()不会覆盖原有配置。
• 选择器错误：ASP.NET服务器控件的前端ID会被自动重写，必须用ClientID获取正确的前端ID，不能直接用#TestDLL。
• CSS类名无效：类名中的空格会导致样式失效，.select2- my-class-section应改为.select2-my-class-section。
• 样式目标错误：原<select>控件会被Select2隐藏，需要针对Select2生成的选中元素设置文本颜色。

2. 修正后的代码 #

JavaScript代码 #

// 初始化Select2，同时配置基础参数
var $testDLL = $('#<%=TestDLL.ClientID%>');
$testDLL.select2();

// 获取后台值（直接取后台属性值，不是jQuery选择器）
var hiddenValue = '<%=HiddenFieldbod.Value%>';

// 检查选中值是否匹配隐藏域的值，更新样式
function updateSpecialStyle() {
    var currentValue = $testDLL.val();
    var $selection = $testDLL.next('.select2').find('.select2-selection');
    
    if (currentValue === hiddenValue) {
        // 设置选中文本颜色
        $selection.css('color', 'red');
        // 添加边框样式类
        $selection.addClass('select2-my-class-section');
    } else {
        // 恢复默认样式
        $selection.css('color', '');
        $selection.removeClass('select2-my-class-section');
    }
}

// 初始化时执行一次样式检查
updateSpecialStyle();

// 监听下拉框值变化，实时更新样式
$testDLL.on('change', updateSpecialStyle);

CSS代码（添加到select2.min.css或自定义样式表） #

/* 选中项边框样式 */
.select2-my-class-section {
    border-color: #FF0000 !important;
    border-width: 2px !important;
}

/* 可选：下拉列表中目标选项也显示红色 */
.select2-results__option[value="<%=HiddenFieldbod.Value%>"] {
    color: red;
}

3. 兼容HTML原生select控件说明 #

如果使用的是原生HTML<select>而非ASP.NET服务器控件，只需做以下调整：

• 将$('#<%=TestDLL.ClientID%>')替换为你的控件ID选择器（比如$('#TestDLL')）
• 将<%=HiddenFieldbod.Value%>替换为隐藏域的取值逻辑（比如document.getElementById('HiddenFieldbod').value）

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