Aprende a implementar una selección múltiple de lado a lado útil en jQuery.

Implementación de un elemento de selección múltiple de lado a lado con jQuery

Probablemente hablo por mucha gente cuando digo que el control de selección múltiple predeterminado del navegador no es tan fácil de usar. Para seleccionar varios elementos, debe presionar simultáneamente CTRLy luego seleccionar los elementos que desea del elemento. Por esta sencilla razón, la selección múltiple no es el componente favorito de los usuarios o desarrolladores web.

Para solucionar este problema de la experiencia del usuario, hay muchas formas de reemplazar el uso de selecciones múltiples, uno de estos componentes es la famosa selección múltiple de lado a lado, donde simplemente puede seleccionar los elementos del lado izquierdo y se agregarán en el lado derecho seleccione. En este artículo, queremos compartir contigo un complemento increíble que hace esto exactamente por ti fácilmente.

1. Incluir selección múltiple

Multiselect es un increíble complemento de jQuery que convierte su selección múltiple en un panel con dos lados. El usuario puede seleccionar uno o más elementos y enviarlos al otro lado respectivamente. Para usar este complemento en su proyecto web, solo necesita incluir una copia del script e incluirlo en el documento usando una etiqueta de script:

<!-- Usando una copia local -->
<script src="multiselect.min.js"></script>

<!-- Usando una CDN -->
<script src="https://cdn.rawgit.com/crlcu/multiselect/master/dist/js/multiselect.min.js"></script>

Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí , consulte la página de demostración aquí o lea la documentación.

2. Uso de selección múltiple

Ahora que el complemento se ha incluido en el proyecto, podrá inicializarlo con JavaScript más adelante. En primer lugar, debe crear el marcado que contendrá las 2 selecciones requeridas por el complemento para que funcione y, además, los botones que activarán las acciones predeterminadas. Básicamente, la idea es construir 3 columnas que contendrán los elementos mencionados, asumiendo que usa un marco CSS como Bootstrap, el marcado se vería así:

<div class="row">
    <!-- Selección del lado izquierdo -->
	<div class="col-xs-5 col-md-5 col-sm-5">
		<select name="from[]" id="mySideToSideSelect" class="form-control" size="8" multiple="multiple">
			<option value="1">Item 1</option>
			<option value="3">Item 3</option>
			<option value="2">Item 2</option>
		</select>
	</div>
    
    <!-- Botones de acción -->
	<div class="col-xs-2 col-md-2 col-sm-2">
		<button type="button" id="mySideToSideSelect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="mySideToSideSelect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="mySideToSideSelect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="mySideToSideSelect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
    
    <!-- Selección del lado derecho -->
	<div class="col-xs-5 col-md-5 col-sm-5">
		<select name="to[]" id="mySideToSideSelect_to" class="form-control" size="8" multiple="multiple"></select>
	</div>
</div>

Ahora, en el marcado hay varios puntos importantes a tener en cuenta para comprender cómo funciona el complemento. La primera es que solo necesita una única identificación, el resto de las identificaciones también seguirán el mismo nombre pero con un sufijo. Por ejemplo, en este caso nuestro id del elemento izquierdo es mySideToSideSelect, por lo que los id de los botones de acción tendrán como prefijo el id de su elemento, por lo que en este caso tendríamos mySideToSideSelect_rightAlletc. Ahora, el id del elemento derecho tendrá así como id el prefijo de su id inicial y el sufijo _to, por lo que el id del elemento correcto sería mySideToSideSelect_to. Después de construir el marcado correctamente, solo necesita inicializar la selección múltiple con jQuery:

$(document).ready(function() {
	$('#mySideToSideSelect').multiselect();
});

Y eso es ! Vale la pena mencionar que utilizamos una inicialización muy sencilla que sigue el esquema estándar, sin embargo, puede cambiar los identificadores de los elementos que desee siempre que los proporcione en el objeto de configuración de selección múltiple, así que asegúrese de leer el documentación del complemento para obtener más información sobre esta función.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores