为select添加required后，jQuery selectpicker刷新无效问题求助

我之前也踩过这个坑，Bootstrap Select的美化层和原生select是分离的两个DOM结构，直接给原生select加required后调用refresh确实可能没效果——因为refresh方法主要负责同步选项的增删改，不会自动把required这类属性同步到美化后的组件里。

给你几个可行的解决方案：

方案一：手动同步美化组件的必填状态 #

Bootstrap Select会在原生select后面生成一个带.bootstrap-select类的容器，我们可以在设置原生select的required后，同步给这个容器添加标识，同时处理无障碍属性：

// 定位目标select元素
const $targetSelect = $('select[id*=oxStateSelect_invadr]');
// 给原生select设置required属性
$targetSelect.prop('required', true);
// 同步ARIA必填属性到美化后的触发按钮
$targetSelect.next('.bootstrap-select').find('.bs-selectpicker').attr('aria-required', 'true');
// 给美化容器添加自定义必填样式类（可以配合CSS显示星号提示）
$targetSelect.next('.bootstrap-select').addClass('select-required');
// 最后刷新组件
$targetSelect.selectpicker('refresh');

如果需要显示必填星号，可搭配这段CSS：

.select-required .dropdown-toggle::after {
    content: '*';
    color: #dc3545;
    margin-left: 4px;
}

方案二：用render方法重新渲染组件 #

如果refresh力度不够，试试用render方法重新生成整个美化组件，它会完全基于原生select的当前状态重建DOM结构：

$('select[id*=oxStateSelect_invadr]')
  .prop('required', true)
  .selectpicker('render');

这个方法更彻底，能把原生select的所有属性同步到美化组件中。

方案三：确保表单验证触发原生检查 #

即使美化层没显示必填标识，原生select的required属性在表单提交时其实是生效的，但如果用了自定义验证逻辑，记得要检查原生select的状态，而非美化后的容器：

$('form').submit(function(e) {
  const $requiredSelect = $('select[required][id*=oxStateSelect_invadr]');
  if ($requiredSelect.val() === '') {
    e.preventDefault();
    // 给美化组件添加错误样式
    $requiredSelect.next('.bootstrap-select').addClass('is-invalid');
    alert('请选择状态选项');
  }
});

核心原因就是Bootstrap Select的美化DOM和原生select是独立的，refresh只负责选项同步，属性类的变更需要手动处理或者用render重新生成~

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