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
Steps to implement jQuery select2 multi-select
1. Create HTML form
First, we will create a PHP file named index.php to create a multi-select dropdown.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html> <head> <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"> </head> <body> <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> </body> </html> |
To implement the select2 plugin, we need to import below js and css in the <head> section.
1 2 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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
1 2 3 4 5 6 | <?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..!! 🙂
