Dynamic Multi-column Dropdown Plugin For Bootstrap

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.