Select to div

Convert Select to div select

by Juan Muñoz

HTML

<select id="pa_talle" name="attribute_pa_talle" data-attribute_name="attribute_pa_talle">
    <option value="">Escoge una opción…</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
</select>

<div class="selector"></div>

CSS

.selector {
    margin-top:15px;
}

.selector div {
    float:left;
    padding:10px;
    border-radius:5px;
    text-align:center;
    font-weight:bold;
    font-size:20px;
    margin-right:10px;
    color:#43494E;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.selector div:hover {
    background:#BE4685; 
    color:#fff;
    cursor:pointer;
}

.selector div.activo {
    background:#BE4685; 
    color:#fff;
}

JavaScript

$("#pa_talle option").each(function(index) {
    texto = $(this).text();
    valor = $(this).val();
    crearDiv = "<div data-value='"+valor+"'>"+texto+"</div>";
    if(valor!=""){
        $('.selector').append(crearDiv);
    }    
});

$('.selector div').click(function(e){
    $('.selector div').removeClass('activo');
    $(this).addClass('activo');
    $('#pa_talle option[value="'+$(this).data("value")+'"]').prop('selected', true).change();
});