Input Select using Select2 Plugin

Submitted by: 
Language: 
Visitors have accessed this post 320 times.

Adding Dependencies

In order to add select2, we need to include the plugin to our page. Note that files use in this tutorial is included in the downloadable.

Include the CSS and JS of select2 in the header section of your page of the JS file before the closing body tag.

  1. <link rel="stylesheet" type="text/css" href="assets/select2.min.css">
  2. <script src="assets/jquery.min.js"></script>
  3. <script src="assets/select2.full.min.js"></script>

Don't forget to include jQuery as well.

Initializing Select2

Next step is to initialize our select2 and assign it to a class.

  1. $(function(){
  2. //Initialize Select2 Elements
  3. $('.select2').select2()
  4. });

Creating the Select Input

Lastly, we create the select tag where we want to apply select2.

  1. <select class="form-control select2" name="fruit">
  2. <option value="" selected>- Select Fruit -</option>
  3. <option>Apple</option>
  4. <option>Orange</option>
  5. <option>Strawberry</option>
  6. <option>Mango</option>
  7. <option>Watermelon</option>
  8. <option>Melon</option>
  9. <option>Jackfruit</option>
  10. <option>Star Apple</option>
  11. <option>Buko</option>
  12. <option>Guava</option>
  13. <option>Peach</option>
  14. <option>Pears</option>
  15. <option>Chico</option>
  16. <option>Durian</option>

Full HTML

Here's the full html.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Input Select using Select2 Plugin</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  7. <link rel="stylesheet" type="text/css" href="assets/select2.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h1 class="text-center" style="margin-top:30px;">Input Select using Select2 Plugin</h1>
  12. <hr>
  13. <div class="row justify-content-center">
  14. <div class="col-sm-4">
  15. <?php
  16. if(isset($_POST['submit'])){
  17. $fruit = $_POST['fruit'];
  18. echo "<p>You selected: <b>".$fruit."</b></p>";
  19. }
  20. ?>
  21. <form method="POST">
  22. <div class="form-group">
  23. <select class="form-control select2" name="fruit">
  24. <option value="" selected>- Select Fruit -</option>
  25. <option>Apple</option>
  26. <option>Orange</option>
  27. <option>Strawberry</option>
  28. <option>Mango</option>
  29. <option>Watermelon</option>
  30. <option>Melon</option>
  31. <option>Jackfruit</option>
  32. <option>Star Apple</option>
  33. <option>Buko</option>
  34. <option>Guava</option>
  35. <option>Peach</option>
  36. <option>Pears</option>
  37. <option>Chico</option>
  38. <option>Durian</option>
  39. </select>
  40. </div>
  41. <button type="submit" class="btn btn-primary" name="submit">Submit</button>
  42. </form>
  43. </div>
  44. </div>
  45. </div>
  46.  
  47. <script src="assets/jquery.min.js"></script>
  48. <script src="assets/select2.full.min.js"></script>
  49. <script>
  50. $(function(){
  51. //Initialize Select2 Elements
  52. $('.select2').select2()
  53. });
  54. </script>
  55. </body>
  56. </html>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.