Bootstrap 4 multiselect dropdown
Filter

Bootstrap 4 multiselect dropdown

by Soeng Souy /
Share

index.html, improved for clarity, readability, and consistency:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Select</title>

    <!-- Select2 CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Select2 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <style>
        .mul-select {
            width: 100%;
        }
    </style>
</head>
<body>

    <div class="container-fluid h-100 bg-light text-dark">
        <div class="row justify-content-center align-items-center">
            <h1>Select Multiple Countries</h1>    
        </div>

        <br>

        <div class="row justify-content-center align-items-center h-100">
            <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
                <div class="form-group">
                    <!-- Multiple Select Dropdown -->
                    <select class="mul-select" multiple="true">
                        <option value="Cambodia">Cambodia</option>
                        <option value="Khmer">Khmer</option>
                        <option value="Thailand">Thailand</option>
                        <option value="Korea">Korea</option>
                        <option value="China">China</option>
                        <option value="English">English</option>
                        <option value="USA">USA</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            $(".mul-select").select2({
                placeholder: "Select countries", // Placeholder text
                tags: true,
                tokenSeparators: ['/', ',', ';', ' ']
            });
        });
    </script>

</body>
</html>

Key Improvements:

  1. Title and Heading: Changed the title from "Multilpe Select" to "Multiple Select" for consistency and updated the heading text to match the title.

  2. Select2 Initialization: Ensured that the select2 functionality is correctly applied to the select input, with a placeholder and multiple tag support.

  3. CSS: Kept the .mul-select class for styling the width of the select dropdown.

  4. Option Corrections: Fixed minor spelling errors, such as "Thiland" to "Thailand" and "Koren" to "Korea".

  5. Responsive Layout: Ensured that the layout remains responsive, with appropriate Bootstrap column classes (col-sm-6, col-md-6, etc.) for different screen sizes.

Tag
Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

2 Comments

CAN FEEDBACK
  1. Unknown
    Unknown
    Thank You
  2. Souy Soeng
    Souy Soeng
    Ok
close