<link rel="stylesheet" type="text/css" href="assets/select2.min.css">
$(function(){ //Initialize Select2 Elements $('.select2').select2() });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Input Select using Select2 Plugin</title> <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="assets/select2.min.css"> </head> <body> <div class="container"> <h1 class="text-center" style="margin-top:30px;">Input Select using Select2 Plugin</h1> <hr> <div class="row justify-content-center"> <div class="col-sm-4"> <?php $fruit = $_POST['fruit']; echo "<p>You selected: <b>".$fruit."</b></p>"; } ?> <form method="POST"> <div class="form-group"> <select class="form-control select2" name="fruit"> <option value="" selected>- Select Fruit -</option> <option>Apple</option> <option>Orange</option> <option>Strawberry</option> <option>Mango</option> <option>Watermelon</option> <option>Melon</option> <option>Jackfruit</option> <option>Star Apple</option> <option>Buko</option> <option>Guava</option> <option>Peach</option> <option>Pears</option> <option>Chico</option> <option>Durian</option> </select> </div> <button type="submit" class="btn btn-primary" name="submit">Submit</button> </form> </div> </div> </div> <script src="assets/jquery.min.js"></script> <script src="assets/select2.full.min.js"></script> <script> $(function(){ //Initialize Select2 Elements $('.select2').select2() }); </script> </body> </html>