页面加载时无法用jQuery为Select2容器父元素设置边框的问题

你遇到的问题核心是Select2的DOM元素是动态生成的：#select2-selectValue-container这个元素是在Select2完成初始化后才会被插入到页面中，而$(document).ready()执行时，Select2还没完成初始化，此时这个元素根本不存在，所以你的样式设置代码找不到目标元素，自然不生效。而切换下拉框时能生效，是因为此时Select2已经完成初始化，目标DOM元素已经存在了。

另外注意：你的代码里没有显式初始化Select2的代码，这可能也是一个隐藏问题——如果没有调用$('.selectValue').select2()，原生select不会被Select2替换，同样不会出现目标元素。

方案1：利用Select2的初始化回调（最推荐） #

在Select2初始化的select2:init事件回调中执行样式设置，确保目标元素已经存在：

<select id="selectValue" class="selectValue form-control select2" name="selectValue" style="width: 100%;">
  <option value="" selected="selected">Select Value</option>
  <option value="Test 1">Test 1</option> 
  <option value="Test 2">Test 2</option> 
</select> 

<script src="/jquery/jquery.min.js"></script>
<!-- 别忘了引入Select2的JS和CSS -->
<link href="/select2/css/select2.min.css" rel="stylesheet">
<script src="/select2/js/select2.min.js"></script>

<script>
  $(document).ready(function () {
    // 1. 先初始化Select2
    $('.selectValue').select2({
      width: '100%', // 确保宽度正确
      placeholder: 'Select Value'
    }).on('select2:init', function() {
      // 初始化完成后，设置红色边框
      $('#select2-selectValue-container').parent().css({'border' : 'solid 1px red'});
    });

    // 2. 原有的change事件逻辑
    $(".selectValue").change(function(e){
      e.preventDefault();
      var selected = $(this).val();
      const targetParent = $('#select2-selectValue-container').parent();
      if(selected === "" || selected === undefined || selected === null){
        targetParent.css('border', 'solid 1px red');
      } else {
        targetParent.css('border', 'solid 1px green'); 
      }  
    });
  });
</script>

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

避免使用内联样式，通过添加/移除CSS类来控制边框样式，更符合前端最佳实践：

首先添加CSS样式：

/* 定义红色边框类 */
.select2-red-border .select2-selection {
  border: 1px solid red !important;
}
/* 定义绿色边框类 */
.select2-green-border .select2-selection {
  border: 1px solid green !important;
}

然后修改JS代码：

$(document).ready(function () {
    $('.selectValue').select2({
      width: '100%'
    }).on('select2:init', function() {
      // 初始化后添加红色边框类
      $(this).data('select2').$container.addClass('select2-red-border');
    });

    $(".selectValue").change(function(e){
      e.preventDefault();
      var selected = $(this).val();
      const select2Container = $(this).data('select2').$container;
      if(selected === "" || selected === undefined || selected === null){
        select2Container.removeClass('select2-green-border').addClass('select2-red-border');
      } else {
        select2Container.removeClass('select2-red-border').addClass('select2-green-border');
      }  
    });
});

方案3：使用MutationObserver监听DOM变化 #

如果无法确定Select2的初始化时机，可以用DOM监听来等待目标元素出现：

$(document).ready(function () {
    // 初始化Select2
    $('.selectValue').select2({width: '100%'});

    // 创建DOM观察者
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            const target = $('#select2-selectValue-container');
            if (target.length) {
                target.parent().css({'border' : 'solid 1px red'});
                observer.disconnect(); // 找到元素后停止监听
            }
        });
    });

    // 监听body的子元素变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // 原有的change事件逻辑
    $(".selectValue").change(function(e){
      e.preventDefault();
      var selected = $(this).val();
      const targetParent = $('#select2-selectValue-container').parent();
      if(selected === "" || selected === undefined || selected === null){
        targetParent.css('border', 'solid 1px red');
      } else {
        targetParent.css('border', 'solid 1px green'); 
      }  
    });
});

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