How to implement jQuery select2 multiple select plugin in PHP

Today, we’ll explain to you how to implement jQuery select2 multiple select plugin in PHP.

The jQuery select2 plugin is used to shortlist and filter selected options when we have a large amount of data. Using the Select2 plugin, we can perform the search functionality in select box, manage autocomplete dynamically using Ajax and add select options with checkbox etc.

You can also check Dynamic dependent select box using jQuery, Ajax, and PHP.

Demo Example

Output - How to implement jQuery select2 multiple select plugin in PHP - Clue Mediator

Steps to implement jQuery select2 multi-select

Create HTML form
Add jQuery Ajax code
Create PHP action file
Output

1. Create HTML form

First, we will create a PHP file named `index.php` to create a multi-select dropdown.

index.php




  <title>Implement jQuery select2 multiple select plugin in PHP - Clue Mediator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">



  <div class="container">
    <h3>Implement jQuery select2 multiple select plugin in PHP - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
    <br>
    <div class="col-md-4">
      <form method="POST">
        <div class="form-group">
          <label>Category:</label>
          <select class="category form-control" name="category[]" multiple>
            <option value="laravel">Laravel</option>
            <option value="jquery">Jquery</option>
            <option value="php">PHP</option>
            <option value="react">React</option>
            <option value="codeigniter">CodeIgniter</option>
            <option value="vuejs">Vue JS</option>
            <option value="bootstrap">Bootstrap</option>
            <option value="angularjs">Angular JS</option>
          </select>
        </div>
        <div class="form-group">
          <button class="btn btn-primary" id="saveData">Submit</button>
        </div>
        <div id="result">
        </div>
      </form>
    </div>
  </div>

To implement the select2 plugin, we need to import below js and css in the `<head>` section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">

2. Add jQuery Ajax code

In the next step, we need to add a jQuery script to get multiselect values and send it to the php file named `getData.php` via ajax request.

<script type="text/javascript">
  $(document).ready(function () {
    $('.category').select2();
  });

  $('body').on('click', '#saveData', function (e) {
    e.preventDefault();
    var category = $('.category').val();
    $.ajax({
      url: "getData.php",
      method: "POST",
      type: "json",
      data: { category: category },
      success: function (data) {
        $('#result').html(data);
      }
    })
  });
</script>

3. Create PHP action file

Now, we will create a php file named `getData.php` where we will get the dropdown selected values and manage it easily in PHP. Refer the following article to insert data into the database.

Submit a form without page refresh using jQuery, Ajax, PHP and MySQL

getData.php

<!--?php
if(isset($_POST) && !empty($_POST)) {
	echo "<pre-->";
	print_r($_POST);
}
?>

4. Output

For more information about the select2 events and others checkout here.

Run the project and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository