Selectbox

Name: Selectbox
Brand: Jose Aguilar
SKU: joseaguilarblog-6082
Availability: InStock
Rating: 5 (3 reviews)

Selectbox es un plugin de jQuery UI que te permite personalizar con más facilidad los elementos de selección única o dropdown (selects de HTML).

La principal funcionalidad del plugin es la conversión de los selects y options por ul y li para poderlo personalizar más cómodamente su aspecto.

Su implementación es muy sencilla. Tan solo tienes que añadir en la cabecera de tu página los estilos necesarios, la librería jQuery, el plugin y su llamada:

<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript">
$(function () {
    $("#country_id").selectbox();
});
</script>

Todos estos archivos los puedes descargar de la página oficial del plugin, además de observar todas sus posibilidades.

El plugin parece bastante interesante también porque permite añadir combos dependientes utilizando la técnica AJAX.

En el <body> de tu página podrás añadir tus selects como sueles hacerlo pero añadiéndole un identificador único para invocarlo en la llamada al plugin.

<select name="country_id" id="country_id">
    <option value="1">España</option>
    <option value="4">Brazil</option>
    <option value="10">South Africa</option>
    ...
</select>

Ver ejemplo en funcionamiento