He preparado un componente que simula un elemento SELECT
, en el que se puede seleccionar una sola opción, que evita algunas de las limitaciones de los elementos SELECT
de verdad, pudiendo dar formato a las opciones que contiene, añadir imágenes, etc.
Consiste en un listado con elementos INPUT
de tipo radio:
<div class="simulacion_select">
<p class="etiqueta">Seleccionar imagen 1:</p>
<div class="listado">
<div class="listado_interior">
<ul>
<li class="primero"><label for="c_sel_1_1" class="clear"><input type="radio" name="c_sel" id="c_sel_1_1" /><span class="etiqueta"><img src="img/1.jpg" alt="" /><span class="texto">Imagen de prueba 1</span></span></label></li>
[...]
<li><label for="c_sel_1_10" class="clear"><input type="radio" name="c_sel" id="c_sel_1_10" /><span class="etiqueta"><img src="img/10.jpg" alt="" /><span class="texto">Imagen de prueba 10</span></span></label></li>
</ul>
</div>
</div>
</div>
Como se ve en el ejemplo de código se trata de un listado de imágenes con un texto asociado.
Para conseguir la simulación es necesario un sencillo script que he montado como plugin de jQuery, ya que por fin encontré un tutorial sencillo de entender para crearlos (enlace externo):
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery('.simulacion_select').simulacionSelect();
});
(function($){
$.fn.simulacionSelect = function(options){
var op = {
campo: 'input',
etiqueta: 'span.etiqueta',
elementoLista: 'li',
capaListado: '.listado',
claseJs: 'simulacion_select_con_js',
claseEnlace: 'clear',
claseSeleccionado: 'seleccionado',
claseListadoSeleccionado: 'listado_seleccionado'
}
var datos = {
capaInicial: '',
campo: '',
campoSeleccionado: '',
enlace: ''
}
var options = $.extend(op, options);
return this.each(function(){
datos.capaInicial = $(this);
datos.campo = elementos(op.campo);
datos.etiqueta = elementos(op.etiqueta);
datos.capaInicial.addClass(op.claseJs);
modificarHtml();
});
function elementos (elemento) {
return datos.capaInicial.contents().find(elemento);
}
function modificarHtml () {
datos.campo.hide();
datos.etiqueta.wrap('<a href="#" class="'+op.claseEnlace+'" />');
datos.enlace = elementos('a.'+op.claseEnlace);
interaccion();
}
function interaccion () {
datos.campoSeleccionado = elementos('input:checked');
if (datos.campoSeleccionado.length>0) {seleccionar();}
datos.enlace.bind('click',function (ev) {
ev.preventDefault();
var campo = $(this).prev(op.campo);
campo.attr('checked',true);
datos.campoSeleccionado = campo;
seleccionar();
});
}
function seleccionar () {
datos.campoSeleccionado.closest(op.elementoLista).addClass(op.claseSeleccionado).siblings('.'+op.claseSeleccionado).removeClass(op.claseSeleccionado);
datos.campoSeleccionado.closest(op.capaListado).addClass(op.claseListadoSeleccionado);
}
}
})(jQuery);
Este script oculta los campos de tipo radio y envuelve el resto de elementos que hay dentro del LABEL
dentro de un enlace. Al clicar dicho enlace se marca el campo de tipo radio. Este script presupone que todos los elementos del listado van a tener la misma altura.