When selecting an option, the color of the selected option is marked

Question

When selecting an option, the color of the selected option is marked

Navigation

#1 by (3 votes)
#2 by (2 votes)

3

I have the following select that is coming from the database as shown below:

<?php...while($listar=mysqli_fetch_object($sql)){$mostrar.=" <select name='Situacao[]' class='md-form-control'>
                  <option value=''>Selecione</option>
                  <option value='Pago' style='background-color: #006400; color: #FFF'>Pago</option>
                  <option value='Não Pago' style='background-color: #F00; color: #FFF'>Não Pago</option>
                  <option value='Aguardando' style='background-color: #FF8C00; color: #FFF'>Aguardando</option>
               </select>";    
}
...
?>

And the options are:

Itispossiblethatbyselectingoneoftheoptions:

Does the select have the color according to the selected option?

jquery css

asked by anonymous 11.05.2018 / 11:51

2 answers

2

The @Isac response is very good, but I would like to leave another suggestion for reference, where it is not necessary to put style='' in the first option as he suggested.

With cssText you can rewrite style , and if it does not find it in option (in this case, first), it will be empty returning select to initial state.

See:

$("select.md-form-control").on("change", function(){
   this
   .style
   .cssText = $(":selected", this).attr("style");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='Situacao[]' class='md-form-control'>
   <option value=''>Selecione</option>
   <option value='Pago' style='background-color: #006400; color: #FFF'>Pago</option>
   <option value='Não Pago' style='background-color: #F00; color: #FFF'>Não Pago</option>
   <option value='Aguardando' style='background-color: #FF8C00; color: #FFF'>Aguardando</option>
</select>

11.05.2018 / 19:55

Calculate lexicographically letter of a string html input hidden fields do not exit in $ _POST

score 3 · Accepted Answer

You can get the style of the option selected with attr for the style attribute and apply it to the% with%. To get the selected you can use select .

Example:

$("select.md-form-control").on("change", function(){
  $(this).attr("style", $(this).find(":selected").attr("style"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectname='Situacao[]'class='md-form-control'><optionvalue=''style=''>Selecione</option><optionvalue='Pago'style='background-color:#006400;color:#FFF'>Pago</option><optionvalue='NãoPago'style='background-color:#F00;color:#FFF'>NãoPago</option><optionvalue='Aguardando'style='background-color:#FF8C00;color:#FFF'>Aguardando</option></select>

NotethatIhadtoincludeafind(":selected") in the style='' option to return to the initial style.

You can also do the same with classes that get more flexible and scalable. In this case not only the application is slightly different, as the% html of Selecione itself is also different.

Before applying a new class remove the ones you already have with <select> , passing only the ones you want to remove. Then they get the new one to apply from the selected element with removeClass .

Example:

$("select.md-form-control").on("change", function(){
  $(this).removeClass("pago naopago aguardando"); //remover qualquer uma destas classes
  $(this).addClass($(this).find(":selected").attr('class'));
});

.pago {
  background-color: #006400; 
  color: #FFF;
}

.naopago {
  background-color: #F00; 
  color: #FFF;
}

.aguardando {
  background-color: #FF8C00; 
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='Situacao[]' class='md-form-control'>
    <option value='' >Selecione</option>
    <option value='Pago' class='pago'>Pago</option>
    <option value='Não Pago' class='naopago'>Não Pago</option>
    <option value='Aguardando' class='aguardando'>Aguardando</option>
 </select>