Coloring field select option chosen

Question

Coloring field select option chosen

Navigation

#1 by (2 votes)

1

I have a select option field and would like the user to click submit, the system would color the

When inspecting the element with chrome, I noticed that the chosen one put a style display: none and if it does it works, but that's not what I want:

The object is empty if you click the button, the select option will turn red

Here's an example:

var setores = [
            "Almoxarifado",
            "Controladoria",
            "Administrativo",
            "Tecnologia de Informação" 
  ];
 
 var i = 0;
 setores.forEach(function(item){
    i++;
    addOption(i, item);
});

function addOption(i, valor) {
    var option = new Option(valor, i );
    var select = document.getElementById("cmb-setor");
    select.add(option);
}

$('#cmb-setor').trigger("chosen:updated");
  
$('.btn-save').on('click', function(){
   var id = $('#cmb-setor').val();
   console.log("Setor: "+id);
   if( id == 0 ){
     $('select[id="cmb-setor"]').css("border-color","red");
  //   $('select[id="cmb-setor"]').css({"border-color":"red", "display":"block"});
   } 
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css" rel="stylesheet"/>

<div class="form-group">
   <select class=" form-control" id="cmb-setor" data-placeholder="Escolha um setor">
       <option value="0"></option>
   </select>
</div> 

<button class="btn btn-primary btn-save">Salvar</button>


<script>
   $('#cmb-setor').chosen( {allow_single_deselect: true} );
</script>

html jquery bootstrap

asked by anonymous 04.10.2017 / 22:29

1 answer

VueJS / Javascript - components and variables Return code of data entered immediately after INSERT

score 2 · Accepted Answer

You are trying to change the border of select whereas Chosen hides select and creates a div in place, then you should change the border of the div , for this we will create a required style.

Instead of trying to change the border of select :

$('select[id="cmb-setor"]').css("border-color","red");

Change the div that was created by Chosen :

// div[class='chosen-container-single']
$('div.chosen-container-single').addClass('required');

Create a CSS style :

.required .chosen-single {
    border: 1px solid #EE0000 !important;
}

See how it went

var setores = [
            "Almoxarifado",
            "Controladoria",
            "Administrativo",
            "Tecnologia de Informação" 
  ];
 
 var i = 0;
 setores.forEach(function(item){
    i++;
    addOption(i, item);
});

function addOption(i, valor) {
    var option = new Option(valor, i );
    var select = document.getElementById("cmb-setor");
    select.add(option);
}

$(document).ready(function(){
  $('#cmb-setor').trigger("chosen:updated");
  $('#cmb-setor').chosen({
    allow_single_deselect: true
  });
  
  $('.btn-save').on('click', function(){
    var id = $('#cmb-setor').val();
    console.log("Setor: "+id);
    if( id == 0 ){
      // Adiciona a classe "required" na div atraves do seletor "class"
      $('div.chosen-container-single').addClass('required');
    } else {
      // Remove a classe "required" na div atraves do seletor "class"
      $('div.chosen-container-single').removeClass('required');
    }
  });
});

.required .chosen-single {
    border: 1px solid #EE0000 !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css" rel="stylesheet"/>

<div class="form-group">
   <select class=" form-control" id="cmb-setor" data-placeholder="Escolha um setor">
       <option value="0"></option>
   </select>
</div> 

<button class="btn btn-primary btn-save">Salvar</button>