ASP.NET C#中如何用jQuery Validation修改多选下拉框边框颜色

不生效核心原因 #

Select2控件初始化后会隐藏原生的<select>元素，实际在页面渲染、用户可见的是Select2自动生成的自定义DOM结构，你直接修改原生select的样式不会作用到可见的渲染元素上，因此看不到效果。
同时原有代码存在多选判断逻辑问题：e.options[e.selectedIndex].value仅适用于单选下拉框取值，多选场景下无法正确判断选中状态。

修复方案 #

方案1：直接修改Select2渲染元素的样式 #

调整后的JS逻辑如下：

if ($(this).hasClass('select2') && $(this).hasClass('required')) {
  const selectId = $(this).attr('id');
  // 多选场景下val()返回选中值的数组
  const selectedVal = $(this).val();
  // 判断是否未选择有效值：未选中任何值/仅选中默认的0值
  const isInvalid = !selectedVal || (selectedVal.length === 1 && selectedVal[0] == '0');
  
  if (isInvalid) {
    alert("Please select a user");
    // 找到Select2生成的可见容器修改边框
    $(`#${selectId}`).next('.select2-container').find('.select2-selection').css({
      'border-color': 'red',
      'border-width': '1px'
    });
  } else {
    // 验证通过恢复默认边框
    $(`#${selectId}`).next('.select2-container').find('.select2-selection').css({
      'border-color': '#aaa',
      'border-width': '1px'
    });
  }
}

方案2：通过CSS类控制（更易维护） #

先定义样式类：

.select2-selection.validation-error {
  border-color: red !important;
  border-width: 1px !important;
}

调整JS逻辑，通过类切换控制样式：

if ($(this).hasClass('select2') && $(this).hasClass('required')) {
  const selectId = $(this).attr('id');
  const selectedVal = $(this).val();
  const isInvalid = !selectedVal || (selectedVal.length === 1 && selectedVal[0] == '0');
  const $select2El = $(`#${selectId}`).next('.select2-container').find('.select2-selection');
  
  if (isInvalid) {
    alert("Please select a user");
    $select2El.addClass('validation-error');
  } else {
    $select2El.removeClass('validation-error');
  }
}

注意事项 #

• 所有验证逻辑需要在Select2初始化完成后执行，避免找不到对应的渲染元素
• 如果你用的是jQuery Validation插件，可以直接配置highlight和unhighlight回调函数，统一处理Select2控件的错误样式，不需要单独写判断逻辑

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