We have many jQuery libraries that help us to make a jQuery multiselect dropdown.
- Multiselect.js
- Tokenize2.js
- Select2.js
In this tutorial, I will guide you on how to use Multiselect.js library, and also you will get complete source code at the bottom.
Multiselect.js (library) for jQuery multiselect dropdown:
First, you need to download Multiselect.js library.
Click me to download the default multiselect library.
Click me to download my customize multiselect library.
Important!
I did some customization in multiselect library in which I replace input field with font awesome check ICON. You can see the difference in the below image.
Simply download any file and add a link in a footer. If you add script links in the footer it will not slow your page speed or create render blocking. Now create a Select and their options you need to add ‘ID’ attribute also one extra ‘Multiple’ attribute as add-in below code.
<select class="form-control" name="cities[]" multiple id="cities">
<option value="1">Lahore</option>
<option value="2">Islamabad</option>
<option value="3">Rawalpindi</option>
<option value="4">Karachi</option>
<option value="5">Bhawalpur</option>
<option value="6">Faisalabad</option>
<option value="7">Gujrawala</option>
</select>
Now Call a function below the script link as shown below.
<script src="jquery.multiselect.js"></script>
<script type="text/javascript">
$('#cities').multiselect({
columns: 1,
placeholder: 'Select City',
selectAll: true
});
</script>
Important!
If you want a jQuery multiselect dropdown with custom font awesome icon then follow the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery Multiselect</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="font-awesome.min.css">
</head>
<style type="text/css">
.ms-options-wrap > .ms-options > ul label {
position: relative;
/* display: inline-block; */
width: 100%;
padding: 8px 4px;
margin: 1px 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
margin-right: 5px;
}
.ms-options-wrap > button:focus, .ms-options-wrap > button {
position: relative;
width: 100%;
text-align: left;
border: 1px solid #aaa;
background-color: #fff;
padding: 5px 20px 5px 5px;
margin-top: 1px;
font-size: 13px;
color: #000;
outline: none;
white-space: nowrap;
border-radius: 5px;
}
.padding-top{
padding-top: 100px;
}
.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
margin-right: 5px;
display: none;
}
.ms-options-wrap > .ms-options > ul label i:before{
padding-right: 5px;
}
.selected > label i:before {
color: #12d318;
}
.ms-selectall{
text-transform: uppercase;
}
.selected{
background-color: #e0e0e0!important;
color: #424242!important;
}
ul{
border: 1px #e0e0e0 solid;
}
li:hover{
background-color: #e0e0e0!important;
color: #424242!important;
}
</style>
<body>
<div class="container padding-top">
<div class="row">
<div class="col-md-6 text-center col-md-offset-3">
<h1>JQuery Multiselect Dropdown</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<select class="form-control" name="cities[]" multiple id="cities">
<option value="1">Lahore</option>
<option value="2">Islamabad</option>
<option value="3">Rawalpindi</option>
<option value="4">Karachi</option>
<option value="5">Bhawalpur</option>
<option value="6">Faisalabad</option>
<option value="7">Gujrawala</option>
</select>
</div>
</div>
</div>
<script src="jquery.multiselect.js"></script>
<script type="text/javascript">
$('#cities').multiselect({
columns: 1,
placeholder: 'Select City',
selectAll: true
});
</script>
</body>
</html>
Important!
If you want to add your own font awesome icon then go to line no 501 in jquery.multiselect.js and replace your icon code. Code example is given below.
var label = $('<label><i class="fa fa-check"></i></label>').attr( 'for', 'ms-opt-'+ msCounter );
container.wrapInner( label );
Read More About Can I generate a Pinterest RSS feed with PHP?
If you want to Hire a laravel Freelance Developer you can check here
How to add checkbox in dropdown list using jQuery ?
You just need to use the multiselect.js library and add an ID to your select field and pass it into a multi-select function
start script tag
$(‘#cities’).multiselect({
});
end script tag
it will automatically add a check box to your options. For more detail visit to us.
start script tag
$(‘#cities’).multiselect({
});
end script tag
it will automatically add a check box to your options. For more detail visit to us.
How to select multiple options from a drop down list in html ?
For this, you need to use some jQuery or JavaScript. Simply add a multiselect.js library and call its two-line function. It will automatically allow you to select multiple options with a checkbox. It will also allow you to search within your dropdown. For getting code implementation visit us.
how can select multiple values in jquery?
If you want to do it in a simple and quick way. You need to use multiselect.js. Just add a script and call its function it will give you multiple features like checkbox, Icons, search within your options
Everything is perfect but multiselect js file download link is not working. Any idea