Select2 from select with required 不改变边框颜色。答案

【问题标题】：Select2 from select with required not change border color.Select2 from select with required 不改变边框颜色。
【发布时间】：2018-07-16 20:00:28
【问题描述】：

如果需要，我已在我的表单中添加此 CSS 规则以添加边框颜色橙色。

:required{
    border-color: #f8ac59 !important;
}

但这不适用于 Select2，当我尝试使用这个时，我添加了这个人：

.select2-selection{
    border-color: #f8ac59 !important;
}

问题是所有 select2 都有橙色边框，我只需要来自“select”输入的 select2 具有必需的属性。我该如何解决这个问题。

HTML

<select class="form-control form-control-sm" data-width="100%" required>
    <option>Selec.</option>
    <option>Prueba 2 max with</option>
    <option>Prueba 3</option>
    <option>Prueba 4</option>
    <option>Prueba 5</option>
</select>

首字母：

$('select').each(function () {
        $(this).off('change');
        var width= $(this).attr("data-width") || '100px';
        $(this).select2({
            theme: 'bootstrap4',
            placeholder: "Buscar y Selecionar",
            width: width,
            dropdownAutoWidth: true
        });
    });

【问题讨论】：

标签： select jquery-select2 required

【解决方案1】：

    <select id="mySelect" onchange="myFunction()" class="form-control form-control-sm" data-width="100%" required>
        <option value="one">Selec.</option>
        <option value="two">Prueba 2 max with</option>
        <option value="tree">Prueba 3</option>
        <option value="four">Prueba 4</option>
        <option value="five">Prueba 5</option>
    </select>

<script>
function myFunction() {
  var x = document.getElementById("mySelect");
  if(x.value == "two"){
    x.style.border = "solid orange";
  }
  else{
    x.style.border = "none";
  }
}
</script>

希望对你有帮助

【讨论】：

问题是所有select2都有橙色边框，我只需要来自“select”输入的select2具有必需的属性。我如何在 select2 中解决这个问题
从样式中删除代码，然后实现我发给你的代码
你不需要这个 .select2-selection{ border-color: #f8ac59 !important; } :required{ 边框颜色: #f8ac59 !important; }

【解决方案2】：

为了解决这个问题，有必要对脚本的初始化进行一些更改：

$('select').each(function () {
        $(this).off('change');
        var width= $(this).attr("data-width") || '100px';
        $(this).select2({
            theme: 'bootstrap4',
            placeholder: "Buscar y Selecionar",
            width: width,
            dropdownAutoWidth: true
        });
        var x = this.required;
        if(x){
            $(this).next().children().children().each(function(){
                $(this).css( "border-color", "#f8ac59" );
            });
        }
    });

【讨论】：