Dropdown me con jQuery

Name: Dropdown me con jQuery
Brand: Jose Aguilar
SKU: joseaguilarblog-5677
Availability: InStock
Rating: 5 (8 reviews)

En este artículo vamos a ver como personalizar por completo un selector o dropdown de opciones utilizando jQuery, CSS y contenedores o divs en vez de selects y options sin necesidad de utilizar plugins jQuery que no te acaban de satisfacer.

En vez de utilizar la típica estructura de selector de opciones de un formulario:

<select name="selection">
    <option value="0">Seleccione una opción...</option>
    <option value="Opción 1">Opción 1</option>
    <option value="Opción 2">Opción 2</option>
    <option value="Opción 3">Opción 3</option>
    <option value="Opción 4">Opción 4</option>
</select>

Obteniendo como resultado visual lo siguiente:

Veremos como cambiar el aspecto de este elemento de un formulario sustituyéndolo por contenedores o divs y una lista desordenada de opciones además de algunas técnicas CSS.

En el ejemplo en funcionamiento vamos a obtener el siguiente selector de opciones, que se puede modificar muy fácilmente su diseño a través de CSS:

Añadiremos el siguiente código HTML dentro de nuestro formulario:

<div id="selectme">Seleccione una opción...</div>
<span id="arrow" class="down"></span>
<input type="hidden" name="selection" value="0" />
<ul id="options">
    <li id="option1">Opción 1</li>
    <li id="option2">Opción 2</li>
    <li id="option3">Opción 3</li>
    <li id="option4">Opción 4</li>
</ul>

Ahora necesitaremos incluir los estilos dentro de nuestra hoja de estilo o en su defecto dentro del <head> entre las etiquetas <style></style>:

#selectme {
    width:300px;
    background-color:#EEEEEE;
    color:#000000;
    padding:10px;
    font-weight: bold;
    text-align:left;
    cursor:pointer;
    float:left;
}

ul#options {
    width:300px;
    float:left;
    margin:0px;
    padding:0px;
    display:none;
    margin-bottom:10px;
}

ul#options li {
    width:298px;
    float:left;
    border: 1px solid #DDDDDD;
    color: #333333;
    padding:10px;
    font-weight: bold;
    text-align:left;
    list-style:none;
    cursor:pointer;
    margin-bottom:1px;
}

ul#options li:hover {
    background-color:#EEEEEE;
}

#arrow {
    position: absolute;
    right: 15px;
    top: 18px;
}

.down {
     -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #000000 transparent transparent;
    border-image: none;
    border-right: 5px solid transparent;
    border-style: solid;
    border-width: 5px;
}

.up {
    -moz-border-bottom-colors: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-top-colors: none !important;
    border-color: transparent transparent #000000 !important;
    border-image: none !important;
    border-style: solid !important;
    border-width: 5px !important;
    margin-top: -8px;
}

Y finalmente añadiremos también en el <head> de nuestra página la librería jQuery + los scripts necesarios para hacer el efecto de dropdown básico:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#selectme').live('click', function() {
        if ($('ul#options').is(':hidden')) {
           $('ul#options').show();
           $('#arrow').removeClass('down');
           $('#arrow').addClass('up');
        }
        else {
            $('ul#options').hide();
            $('#arrow').removeClass('up');
            $('#arrow').addClass('down');
        }       
    });

    $('#options li').live('click', function() {
        var value = $(this).text();
        $('#selectme').text(value);
        $('ul#options').hide();
        $('input[name=selection]').val(value);
    });
});
</script>

Ver ejemplo en funcionamiento