Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a Simulación de elemento SELECT con jQuery

Datos de búsqueda

Simulación de elemento SELECT con jQuery

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.

Se puede ver ejemplo funcionando.

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “Simulación de elemento SELECT con jQuery”

maikol dice:

Fecha de comentario: 2010/08/11 01:13

Es un proyecto un poco avanzado vale la pena descargarlo y ver la aplicacion en funcionamiento, el sistema tiene dos listas la cual cuando se selecciona un PAIS en el otro select apareceran las ciudades de este pais, ademas de esto podemos ingresar paises, ciudades, borrar paises, borrar ciudades todo de forma ASINCRONICA con JQUERY, php, mysql y un poco de ajax. espero el proyecto sea de su total agrado pueden ver la aplicacion en funcionamiento aqui: http://www.getvay.com/SeleccionAvanzado/index.php y lo pueden descargar de aqui: http://www.getvay.com/pg/file/macs1407/read/1792/selects

Información del sitio