如何在每个 select2 选择框周围设置边框？

Question

我想用 jQuery 在每个选择框周围设置一个红色边框。但是还是不行：

http://jsfiddle.net/jEADR/3795/

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">

<select class="select" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
    <select class="select" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

<script>
    $(".select").select2();
    $(".select").each(function() {
    $(this).siblings().find(".select2-container").css({"border-color": "red", "border-weight":"5px", "border-style":"solid"});
    });
</script>

Answer 1

首先，您的代码不起作用，因为select2-container 元素是 兄弟姐妹，因此在它们上调用find() 以获取子元素不会返回任何内容。只需删除find() 调用，并将选择器提供给siblings()。另请注意，您可以缩短 border 规则，如下所示：

$(".select").each(function() {
  $(this).siblings(".select2-container").css('border', '5px solid red');
});

但是，更重要的是，您应该注意，当您可以将规则直接放在 CSS 代码中时，为此使用 JS 代码有点多余：

$(".select").select2();

.select2-container {
  border: 5px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">

<select class="select" style="width:300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>
<select class="select" style="width:300px">
  <option value="AL">Alabama</option>
  <option value="Am">Amalapuram</option>
  <option value="An">Anakapalli</option>
  <option value="Ak">Akkayapalem</option>
  <option value="WY">Wyoming</option>
</select>

Answer 2

.select2-selection { border: 1px solid gold!important;}