How to implement multiple selection with check boxes in an HTML select control using jQuery

Estrada Web Group
Administrador
How to implement multiple selection with check boxes in an HTML select control using jQuery

With html you can create drop-down lists with select control and select multiple items by simultaneously pressing the CTRL key and clicking on each of the elements to select. This can be complicated for people who visit your website and that is not what people want. Why did you write this article, instead of using such a useless selection box, we implemented a jQuery plugin to make this simpler. You can download the example here.

The plugin is jQuery Multiple Select, follow the steps below to implement multiple selection easily and in a matter of seconds.

1. Install the Multiple Select Plugin plugin

Multiple Select is a very good plugin jQuery that allows you to select multiple items with check boxes instead of simultaneously pressing CTRL and selecting the options in the default selection. To use this add-on in your project, you will need 3 files, the JavaScript, the style sheet and an image containing the drop-down arrow. You can download these files from the Github repository and include a local copy in your project.

<!-- Using a local copy -->

<!-- Include the default stylesheet -->
<link rel="stylesheet" type="text/css" href="multiple-select.css">
<!-- Include plugin -->
<script src="multiple-select.js"></script>

<!-- Or using a CDN -->

<!-- Include the default stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.css">
<!-- Include plugin -->
<script src="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.js"></script>

2. Initialize and use the plugin

To initialize the plugin, you need a selection element with the multiple-selection attribute activated, you do not need to add special marks or other unnecessary things, simply include the plugin and initialize it in the element:

<!-- A multiple select element -->
<select id="my-select" multiple="multiple">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<script>
    // Initialize multiple select on your regular select
    $("#my-select").multipleSelect({
        filter: true
    });
</script>

3. Full example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demos</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="multiple-select.css" />
</head>
<body>
<div class="container">
    <div class="form-group">
        <label>Month</label>
        <select id="ms" multiple="multiple" class="form-control">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="multiple-select.js"></script>
<script>
    $(function() {
        $('#ms').change(function() {
            console.log($(this).val());
        }).multipleSelect({
            width: '100%'
        });
    });
</script>
</body>
</html>

 

Compartir artículo:

Más artículos geniales

Introducción al manejo de objetos en JavaScript

Introducción al manejo de objetos en JavaScript

Resumen: en este tutorial, aprenderás sobres los objetos de JavaScript y cómo manipular las propiedades de los objetos de manera efectiva.

Ver artículo completo
Cómo usar la declaración if...else de JavaScript

Cómo usar la declaración if...else de JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración if...else de JavaScript para ejecutar un bloque basado en una condición.

Ver artículo completo
Cómo usar la instrucción for de JavaScript

Cómo usar la instrucción for de JavaScript

Resumen: en este tutorial, aprenderás a usar la instrucción de bucle for de JavaScript para crear un bucle con varias opciones.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla