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

Question

I have the following select that is coming from the database as per the image 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:

It is possible that when selecting one of the options:

The select has the color as selected option?

Answer 1

You can get the style of the selected option with attr for the attribute style and applies it to select. To get the selected you can use find(":selected").

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>
<select name='Situacao[]' class='md-form-control'>
    <option value='' style=''>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>

Note that I had to include a style='' in the option Selecione to return to the initial style.

---

You can also do the same with classes that are more flexible and scalable. In this case not only is the application slightly different, but the html of the <select> also looks different.

Before applying a new class remove the ones you already have with removeClass passing only the ones we want to remove. Then get the new one to apply from the selected element with attr('class').

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>

Answer 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='' at first option as he suggested.

With cssText you can rewrite the style, and if you don’t find it in option (in the case, the first), it will be empty returning the select to initial state.

Behold:

$("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>