MULTIPLE SELECT USING BOOTSTRAP SELECT2

There will be cases where you need multiple selections in just a single input control like textbox or perhaps a dropdown box or combo box. You cannot do this using a simple input control. You need a scripting language to be able to do so.

In this article, I created a simple form that uses the latest bootstrap select2 plugin. Select2 is a jquery plugin used to easily search from a dropdown list and scrolling is even possible. It is a drop down box that works as a search box and displays the results below. This function is similar with facebook, gmail, yahoo’s recipient box, etc.

HTML CODE for Bootstrap Multiple Select

<select class="form-control select2" multiple="multiple" data-placeholder="Select Name" style="width: 100%;" name="resident[]" required>
 <?php
  include('dist/includes/dbcon.php');
  $query2=mysqli_query($con,"select * from resident")or die(mysqli_error());
   while($row2=mysqli_fetch_array($query2)){
 ?>
   <option><?php echo $row2['fname']." ".$row2['lname'];?></option>
 <?php }?>
</select>

All highlighted codes above are integral in your select2 plugin. Name with brackets [] will make an array that contains all your multiple selection. You can access and save each value using a foreach loop. If you want to know more on how to save the data selected from your select2 plugin, just look for my new article “Saving Values from Multiple Select”.

SAMPLE OUTPUT Bootstrap Multiple Select

Hope it helps! Good day! ^_^

DOWNLOAD MULTIPLE SELECT USING BOOTSTRAP

Database name: multiple_select

After creating a database, import the file located inside dist/db

Username: admin

password: 123

MULTIPLE SELECT USING BOOTSTRAP SELECT2