CodeIgniter存在表单验证错误时如何修改Select2的CSS样式？

晚上好，
我目前正在开发一个包含多个Select2下拉框的表单，整个项目基于CodeIgniter框架开发。现在我需要在出现CodeIgniter表单验证错误时，修改第一个Select2组件的边框颜色，但尝试的多种写法均无法生效。

以下尝试的写法都无法生效：

1. 直接执行选择器修改样式：

<?php if (validation_errors()) : ?>
    <script>
        $('.select2:first').css('border-bottom', '1px solid red');
    </script>
<?php endif; ?>

2. 把逻辑放在document.ready回调中：

<?php if (validation_errors()) : ?>
    <script>
        $(document).ready(function() {
            $('.select2:first').css('border-bottom', '1px solid red');
        });
    </script>
<?php endif; ?>

3. 用jQuery简写的就绪回调：

<?php if (validation_errors()) : ?>
    <script>
        $(function() {
            $('.select2:first').css('border-bottom', '1px solid red');
        });
    </script>
<?php endif; ?>

目前排查到的现象：

• 在浏览器控制台手动执行$('.select2:first').css('border-bottom', '1px solid red');可以成功修改目标Select2的边框颜色
• 在上述脚本中加入alert("Somthing");代码，可以正常弹出提示框，但样式修改不生效

代码失效是两个必然问题导致的：

• 执行时机错误：$(document).ready只在原生DOM树加载完成后触发，不会等待Select2这类第三方组件完成自身DOM渲染。你的样式代码运行时，Select2还没初始化完成，要么目标渲染节点还没生成，要么已经加上的样式被Select2后续的渲染逻辑直接覆盖。
• 目标元素选错：Select2初始化后会隐藏原生的<select>元素，页面上实际可见的下拉框是它动态生成的.select2-selection节点，直接给原生select加样式不会显示在可见区域。

控制台执行代码能生效，是因为手动输入代码时整个页面（包括所有Select2组件）早已渲染完成；加alert能弹出只能证明JS代码块被正常加载执行，和执行时机是否正确、是否选中了正确元素没有关系。

二选一即可，优先推荐CSS方案，不存在执行顺序问题，稳定性最高。

方案1：通过CSS实现 #

不需要写JS逻辑，完全避开执行顺序问题：

1. 给页面根节点加验证错误状态类：

<body <?php if (validation_errors()) echo 'class="has-validation-error"'; ?>>

2. 在全局样式文件中添加高优先级样式覆盖Select2默认边框：

.has-validation-error .select2:first-of-type + .select2-container .select2-selection {
    border-bottom: 1px solid red !important;
    /* 需要修改整个边框颜色时打开下面这行 */
    /* border-color: red !important; */
}

方案2：调整JS执行逻辑 #

如果一定要用JS修改，把代码绑定到window.load事件（该事件会在所有页面资源、第三方组件渲染完成后触发），同时选中正确的可见元素：

<?php if (validation_errors()) : ?>
<script>
$(window).on('load', function() {
    $('.select2').first()
        .next('.select2-container')
        .find('.select2-selection')
        .css('border-bottom', '1px solid red');
});
</script>
<?php endif; ?>

注意不要把这段代码放到Select2初始化代码的前面，必须保证Select2的初始化脚本先加载执行。

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