Tengo un elemento HTML select#options que al seleccionar una de las opciones va agregar clases dinamicamente al elemento div#container, pero necesito eliminar la clase que se agrego anteriormente a este elemento y luego agregar la nueva clase se la opción seleccionada.
Si se dan cuenta, siempre se agregan las clases pero, pero siguen estando las mismas que se agregaron.
$(function(){
$(document).on('change', 'select#options', function(){
var option_selected = $(this).val();
$('#container').addClass(option_selected);
$('#container').html(option_selected);
console.log($('#container').attr('class'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="" selected>Select</option>
<option value="style1">Style 1</option>
<option value="style2">Style 2</option>
<option value="style3">Style 3</option>
<option value="style4">Style 4</option>
<option value="style5">Style 5</option>
</select>
<div id="container" class="container default"></div>
Agradezco mucho su ayuda.