The ability to choose from a list is one of the important features in any system since it allows users to have an easier time picking from what is provided other than providing answers that the system owner does not intend to have.
Select is a form attribute feature that is used to collect input from a user but its major difference without other form elements like text and text area is that the options are already predefined by the owner of the system or are as a result of another function.
In this article, we shall focus on how to select multiple values from a select list using multi-select element in a form.
What is multiselect element in a form
Multiselect is an attribute added to the select element of a form to assist in picking more than one item from a given list.
Multiselect in bootstrap gives the user the ability to select and submit more than one item from the list that answers the question.
Before we discuss multiselect in detail, we will need to understand how to select element in a form works. As demonstrated below using the example, the select element only allows the user to only pick or select one item from the list despite multiple items fitting the list.
An example of how select element is used
In a case where you may want to collect the age of customers during registration, you may prefer to use age limits like 1 year to 18 years, 19 years to 25 years, 26 years to 35 years, and so on.
This kind of data can best be presented using select element in a form as shown in the code below
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form Select element</h2>
<form>
<div class="row">
<div class="col-md-12">
<select class="form-control" id="age" name="age" required>
<option value="1-18"> 1 year to 18 years </option>
<option value="19-25"> 19 years to 25 years </option>
<option value="26-35"> 26 years to 35 years </option>
<option value="36-50"> 36 years to 50 years </option>
<option value="above50"> above 50 years </option>
</select>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
From the example above, age limits will be displayed in a dropdown list as shown in the image below
In a scenario where the items provided in a list can be used together as an answer, the single select is not recommended.
For example, in a question posted as, which car brands do you like?
In such a question, one may choose 2, 3, or more car brands depending on the preference, therefore it is good to provide the ability to choose more than one.
How to use bootstrap multiselect in a form
- To use bootstrap multiselect in a form, we add the multiple attribute in the select element as shown in this code.
The multiple attribute alerts the select element and it provides room for selecting more than item from the list.
<select class="form-control" multiple >
- Next, in the name attribute define it as an array since the data will be submitted in form of an array
<select class="form-control" multiple name="car_brands[]">
- Next, we define the selectize js which is a combination of a text box and a select box that is based on jquery.
Selectize js provides a feature for searching from the list and also once an item is selected, it is stored as a text view and is removed from the list so that it cannot be selected again.
To add selectize js so that it can be used in a form, we add the selectize bootstrap link and also selectize jquery link as shown below
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"> </script>
An example of using bootstrap multiselect
Suppose we have car brands defined as follows
Toyota, Mazda, Audi, BMW, Volkswagen, KIA, Honda, Hyundai and Benz
We may want to conduct a poll such that users can submit a list on the cars they like.
To achieve this, we will use a select element and to allow more than one selection, we use multiple attribute.
The initial code is as follows;
<form>
<div class="row">
<div class="col-md-12">
<select class="form-control" id="car_brand" name="car_brand[]" multiple required>
<option value="Toyota"> Toyota </option>
<option value="Mazda"> Mazda </option>
<option value="Audi"> Audi </option>
<option value="BMW"> BMW </option>
<option value="Volkswagen"> Volkswagen </option>
<option value="KIA"> KIA </option>
<option value="Honda"> Honda </option>
<option value="Hyundai"> Hyundai </option>
<option value="Benz"> Benz </option>
</select>
</div>
</div>
</form>
The output for the above code is as shown
From the above output, most users will have a difficult time trying to select more than one item.
To make it easier for all users, we use the selectize js plugin which works as follows;
- Defining the selectize links above in the header
- Connecting the selectize with the select element using the id.
In the above form, the select element id is car_brand, therefore add the selectize script shown below
<script>
$(document).ready(function () {
$('#car_brand').selectize({
sortField: 'text'
});
});
</script>
- Once you add the above selectize function, the result will change to be as follows
The full code for bootstrap multiselect using selectize js is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Form Select element</h2>
<form method="post" role="form" id="carform">
<div class="row">
<div class="col-md-12">
<select class="form-control" id="car_brand" name="car_brand[]" multiple required>
<option value="Toyota"> Toyota </option>
<option value="Mazda"> Mazda </option>
<option value="Audi"> Audi </option>
<option value="BMW"> BMW </option>
<option value="Volkswagen"> Volkswagen </option>
<option value="KIA"> KIA </option>
<option value="Honda"> Honda </option>
<option value="Hyundai"> Hyundai </option>
<option value="Benz"> Benz </option>
</select>
</div>
<div class="col-md-12">
<button class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function () {
$('#car_brand').selectize({
sortField: 'text'
});
});
</script>
</body>
</html>
- Once you search and select more than one item from the list, the result will look like the following
- To submit the values selected, add the script below and you will notice that the result will be stored as an array separated by comma
<script>
$("#carform").submit(function(e){
e.preventDefault();
var carbrand=$("#car_brand").val()
alert(carbrand)
})
</script>
Conclusion
In the above discussion, we have defined what a select element is in a bootstrap form and also shown how to add the multiple attribute to allow the selection of more than one item from the options provided.
Finally, we have introduced the selectize js plugin to allow searching from the select list.
Hope so far you have benefitted from the discussion. Thank you for following.
