Select2 from select с обязательным неизменным цветом границы.

Я добавил в свою форму это правило css, чтобы добавить оранжевый цвет границы, если это необходимо.

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

но это не работает для Select2, когда я пытаюсь использовать это, я добавляю этого человека:

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

проблема в том, что весь select2 имеет оранжевую границу, и мне нужно только, что select2 из "select" Input с требуемым атрибутом. как я могу это решить.

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 required jquery-select2
person Community    schedule 16.07.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward 

    <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>

Надеюсь это поможет

person JozeV    schedule 18.07.2018
comment
проблема в том, что весь select2 имеет оранжевую границу, и мне нужно только, что select2 из select Input с требуемым атрибутом. как я могу решить эту проблему в select2 - person ; 18.07.2018
comment
удалите код из стилей, а затем внедрите код, который я вам отправил - person JozeV; 18.07.2018
comment
Вам не нужен этот .select2-selection {border-color: # f8ac59! Important; }: обязательно {border-color: # f8ac59! important; } - person JozeV; 18.07.2018

arrow_upward
0
arrow_downward

Для решения проблемы потребовалось внести некоторые изменения в инициализацию скрипта:

$('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" );
            });
        }
    });
person Community    schedule 18.07.2018