Dynamic Multi-column Dropdown Plugin For Bootstrap
File Size: | 8.57 KB |
---|---|
Views Total: | 3923 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery custom select plugin that dynamically generates a multi-column dropdown box styled using Bootstrap styles.
How to use it:
1. Load the required jQuery library and Bootstrap's stylesheet in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script>
2. Create a container element for the multi-column dropdown.
<div id="example" class="input-group"></div>
3. Define the data to be filled in this dropdown.
var myData = [ { "name": "Alabama", "abbreviation": "AL" }, { "name": "Alaska", "abbreviation": "AK" }, { "name": "American Samoa", "abbreviation": "AS" }, { "name": "Arizona", "abbreviation": "AZ" }, // more data here ]
4. Initialize the multi-column dropdown and populate it with the data you provide.
$("#example").jdbssDropdown({ // or 'inline' datasource: "json", // data source data: theData, // zero based column number that contains the index indexcolumn: 1, // zero based column number that contains the value valuecolumn: 0, // show the index value or hide showindex: true, // // Must be at least 1 less than 12 bootstrapcol: ["col-9", "col-2"], // Arry of text values for use as the Column headings headings: ["State", "Abbr"], });
5. Add custom styles to the data columns and headings.
$("#example").jdbssDropdown({ headingclass: [], dataclass: [], });
6. Customize the caret styles. Can be either 'bootstrap' or 'fontawesome'.
$("#example").jdbssDropdown({ display: { caret: "bootstrap", virtual_width: "300px", display_width: "container" }, });
7. Callback functions.
$("#example").jdbssDropdown({ dropdownopened_callback: function () { // do something }, dropdownclosed_callback: function () { // do something }, rowselected_callback: function () { // do something }, });
This awesome jQuery plugin is developed by jbils001. For more Advanced Usages, please check the demo page or visit the official website.