{"id":3099,"date":"2016-12-14T07:47:14","date_gmt":"2016-12-14T07:47:14","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3099"},"modified":"2024-04-12T11:06:40","modified_gmt":"2024-04-12T11:06:40","slug":"10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/","title":{"rendered":"10 Demos of Bootstrap Multiselect Dropdown by using jQuery"},"content":{"rendered":"

The Bootstrap multiselect with jQuery<\/strong><\/h3>\n

The multiselect dropdown allows the visitors of the website selecting multiple options from a dropdown in a form.<\/p>\n

Although, you may achieve that by using the multiple attribute in the <select> tag of HTML, however, instead of a dropdown, a list view type is displayed that allows users to choose multiple options.<\/p>\n

In this article, the bootstrap-multiselect plug-in which is based on jQuery is used for creating dropdowns with multiple select features that also looks beautiful. It uses Bootstrap framework, so Bootstrap CSS and JS files are also included in the demos.<\/p>\n

Related reading<\/strong>: A jQuery plug-in for multiple selections in listview<\/a> and multiple selections in dropdown with checkboxes<\/a><\/p>\n

First thing – A simple demo of multiselect<\/strong><\/h3>\n

First of all, you may download the plug-in from the Github website by following this<\/a> link. The demo and setup page can be seen there which is shared by the developer and contains a lot of options and respective code.<\/p>\n

The demo HTML is quite large there and I am just trying to break up the big demo page into smaller here.<\/p>\n

Have a look at this simple demo with only a single dropdown and minimum required files:<\/p>\n

\"bootstrap<\/p>\n

See online demo and code<\/strong><\/a><\/h6>\n

The markup for this example:<\/strong><\/p>\n

<select id=\"multi-select-demo\" multiple=\"multiple\">\r\n\r\n\u00a0\u00a0\u00a0 <option value=\"jQuery\">jQuery tutorial<\/option>\r\n\r\n\u00a0\u00a0\u00a0 <option value=\"Bootstrap\">Bootstrap Tips<\/option>\r\n\r\n\u00a0\u00a0\u00a0 <option value=\"HTML\">HTML<\/option>\r\n\r\n\u00a0\u00a0\u00a0 <option value=\"CSS\">CSS tricks<\/option>\r\n\r\n\u00a0\u00a0\u00a0 <option value=\"angular\">Angular JS<\/option>\r\n\r\n<\/select><\/pre>\n
The script:<\/strong><\/p>\n
<script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#multi-select-demo').multiselect();\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n<\/script><\/pre>\n
The <head> section refers to the following files:<\/strong><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <link rel=\"stylesheet\" href=\"http:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.3.2\/css\/bootstrap.min.css\">\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js\"><\/script>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.2\/js\/bootstrap.min.js\"><\/script>\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <link rel=\"stylesheet\" href=\"css\/bootstrap-multiselect\/bootstrap-multiselect.css\" type=\"text\/css\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <script type=\"text\/javascript\" src=\"js\/bootstrap-multiselect\/bootstrap-multiselect.js\"><\/script><\/pre>\n
A demo with option groups<\/strong><\/h3>\n
In this demo, the option groups are used in the select dropdown. Three groups are created in the select dropdown where you can see a checkbox in front of each option. In this demo, the option group itself is not selectable. So, a user has to select each option in different option groups separately, have a look:<\/p>\n
\"bootstrap<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
The script and markup:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n        <link rel=\"stylesheet\" href=\"https:\/\/netdna.bootstrapcdn.com\/bootstrap\/3.3.2\/css\/bootstrap.min.css\">\r\n        <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js\"><\/script>\r\n        <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.2\/js\/bootstrap.min.js\"><\/script>\r\n\r\n        <link rel=\"stylesheet\" href=\"css\/bootstrap-multiselect\/bootstrap-multiselect.css\" type=\"text\/css\">\r\n        <script type=\"text\/javascript\" src=\"js\/bootstrap-multiselect\/bootstrap-multiselect.js\"><\/script>\r\n\r\n\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<div class=\"example\">\r\n    <script type=\"text\/javascript\">\r\n        $(document).ready(function() {\r\n            $('#option-droup-demo').multiselect();\r\n        });\r\n    <\/script>\r\n    <select id=\"option-droup-demo\" multiple=\"multiple\">\r\n        <optgroup label=\"Web Development\">\r\n            <option value=\"jQuery\">jQuery<\/option>\r\n            <option value=\"Bootstrap\">Bootstrap<\/option>\r\n            <option value=\"HTML\" selected=\"selected\">HTML<\/option>\r\n            <option value=\"CSS\" selected=\"selected\">CSS<\/option>\r\n            <option value=\"Angular\">Angular<\/option>\r\n        <\/optgroup>\r\n        <optgroup label=\"Programming Languages\">\r\n            <option value=\"Java\">Java<\/option>\r\n            <option value=\"csharp\">C#<\/option>\r\n            <option value=\"Python\">Python<\/option>\r\n        <\/optgroup>\r\n        <optgroup label=\"Databases\">\r\n            <option value=\"MySQL\">MySQL<\/option>\r\n            <option value=\"Oracle\">Oracle<\/option>\r\n            <option value=\"MSSQL\">MS SQL Server<\/option>\r\n        <\/optgroup>        \r\n    <\/select>\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
A demo of selectable optional group<\/strong><\/h3>\n
By adding the enableClickableOptGroups as true<\/em> in the jQuery code, you may enable users to select the option group itself, thus, all options under that group will be selected at one click \/ selection including the option group.<\/p>\n
\"bootstrap<\/p>\n
The only difference between this and the above example is the use of the option in the jQuery code:<\/p>\n
\u00a0\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#option-droup-demo').multiselect({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 enableClickableOptGroups: true\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
If used false<\/strong>, the option groups won\u2019t be selectable. Also note that if an option is disabled<\/strong> in the option group, the code will still work. However, the disabled option will not be selected as shown in the image below:<\/p>\n
\"bootstrap<\/p>\n
You can see, the Python option is disabled in the dropdown.<\/p>\n
A demo of creating collapsible option groups<\/strong><\/h3>\n
You may also create the dropdown with collapsible option groups by using this multiselect Bootstrap plug-in. So, if a group is clicked, its options will collapse and if clicked again it will expand.<\/p>\n
For that, simply set the:<\/p>\n
enableCollapsibleOptGroups : true<\/pre>\n
in the jQuery code as shown below:<\/p>\n
\"bootstrap<\/p>\n
The jQuery code:<\/strong><\/p>\n
\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#option-droup-demo').multiselect({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 enableClickableOptGroups: true,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 enableCollapsibleOptGroups: true\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
Setting width of the dropdown example<\/strong><\/h3>\n
By using the buttonWidth<\/strong> option in the jQuery code, you may set the width of the dropdown. See this example where I set the width of the dropdown to 300px:<\/p>\n
\"bootstrap<\/p>\n
The jQuery code:<\/strong><\/p>\n
\u00a0\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#boot-multiselect-demo').multiselect({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 buttonWidth: '300px',\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
A demo of multiselect dropping right<\/strong><\/h3>\n
By default, the options in the dropdown fall left whether using this or ordinary HTML select dropdown. You may also drop it right by using the dropRight: true<\/em> option:<\/p>\n
\"bootstrap<\/p>\n
The script:<\/strong><\/p>\n
 \u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#boot-multiselect-demo').multiselect({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 buttonWidth: '350px',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dropRight: true\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
A demo of dropping multi-select towards top<\/strong><\/h3>\n
Similarly, you may drop the options towards the top rather than default downwards. See the demo by clicking the image or link below:<\/p>\n
\"bootstrap<\/p>\n
The script:<\/strong><\/p>\n
\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#boot-multiselect-demo').multiselect({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 includeSelectAllOption: true,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 maxHeight: 350,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dropUp: true\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
A demo with filtering options<\/strong><\/h3>\n
You may add a search box for filtering the options inside the multiselect dropdown. For that, simply add the following option in the jQuery code:<\/p>\n
enableFiltering: true<\/p><\/blockquote>\n
This option will add a textbox where a user may enter letters to filter out the options. See this demo:<\/p>\n
\"bootstrap<\/p>\n
The script:<\/strong><\/p>\n
\u00a0\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#boot-multiselect-demo').multiselect({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 includeSelectAllOption: true,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 buttonWidth: 250,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 enableFiltering: true\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
The markup remains the same as in many other examples for showing the multiselect dropdown.<\/p>\n
Changing the default text when none of the options is selected<\/strong><\/h3>\n
In all the above examples, the text displayed if none of the options is selected is: \u201cNone Selected\u201d<\/em><\/strong>.<\/p>\n
You may change this text in the context of the multiselect dropdown. For example, in our examples, I am using web development, programming languages, and databases for selecting the expertise. I will use the \u201cSelect expertise!\u201d if none is selected as follows:<\/p>\n
\"bootstrap<\/p>\n
The script:<\/strong><\/p>\n
\u00a0\u00a0\u00a0 <script type=\"text\/javascript\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#boot-multiselect-demo').multiselect({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 nonSelectedText: 'Select expertise!',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 buttonWidth: 250,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 enableFiltering: true\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 <\/script><\/pre>\n
Other options for the multiselect dropdown<\/strong><\/h3>\n
The plug-in has many other options that you may explore by going to the demo page from the Github website. For example, calling the callback functions as a dropdown is loaded, after the dropdown is shown, and calling a callback function after the dropdown is closed. You may perform the different actions on each event using this plug-in.<\/p>\n
Plug-in link<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Bootstrap Multiselect Dropdown allows the visitors of the website selecting multiple options from a dropdown in a form. Learn how in this tutorial.<\/p>\n","protected":false},"author":1,"featured_media":3100,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[48,30],"yoast_head":"\n10 Demos of Bootstrap Multiselect Dropdown by using jQuery<\/title>\n<meta name=\"description\" content=\"Bootstrap multi-select dropdown allows the visitors of the website to select multiple options from a dropdown in a form. Learn how..\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Demos of Bootstrap Multiselect Dropdown by using jQuery\" \/>\n<meta property=\"og:description\" content=\"Bootstrap multi-select dropdown allows the visitors of the website to select multiple options from a dropdown in a form. Learn how..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-14T07:47:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T11:06:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/12\/63.0_1-bootstrap-multiselect.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"253\" \/>\n\t<meta property=\"og:image:height\" content=\"213\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/\",\"url\":\"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/\",\"name\":\"10 Demos of Bootstrap Multiselect Dropdown by using jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-12-14T07:47:14+00:00\",\"dateModified\":\"2024-04-12T11:06:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"Bootstrap multi-select dropdown allows the visitors of the website to select multiple options from a dropdown in a form. Learn how..\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Demos of Bootstrap Multiselect Dropdown by using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10 Demos of Bootstrap Multiselect Dropdown by using jQuery","description":"Bootstrap multi-select dropdown allows the visitors of the website to select multiple options from a dropdown in a form. Learn how..","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/","og_locale":"en_US","og_type":"article","og_title":"10 Demos of Bootstrap Multiselect Dropdown by using jQuery","og_description":"Bootstrap multi-select dropdown allows the visitors of the website to select multiple options from a dropdown in a form. Learn how..","og_url":"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/","article_published_time":"2016-12-14T07:47:14+00:00","article_modified_time":"2024-04-12T11:06:40+00:00","og_image":[{"width":253,"height":213,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/12\/63.0_1-bootstrap-multiselect.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/","url":"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/","name":"10 Demos of Bootstrap Multiselect Dropdown by using jQuery","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-12-14T07:47:14+00:00","dateModified":"2024-04-12T11:06:40+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"Bootstrap multi-select dropdown allows the visitors of the website to select multiple options from a dropdown in a form. Learn how..","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/10-demos-of-bootstrap-multiselect-dropdown-by-using-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"10 Demos of Bootstrap Multiselect Dropdown by using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3099"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=3099"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3099\/revisions"}],"predecessor-version":[{"id":12431,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3099\/revisions\/12431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/3100"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=3099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=3099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=3099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}