Configurable Multiple Column Dropdown Box Based on Twitter Bootstrap

JQuery-MultiColumn-DropDown-Box converts the selected JQuery plugin into configurable multi-column dropdown boxes based on the Twitter Bootstrap formatting, which is useful when there is more than a simple list of values.

multiple column dropdown bootstrap, multi column dropdown selector plugin for jquery, multiple column dropdown select, jquery multi column dropdown

How to make use of it:

1. Load the required jQuery library and Bootstrap’s stylesheet within the doc.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Create a container factor for the multi-column dropdown.

<div id="example" class="input-group"></div>

3. Define the info to be stuffed on 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 info you present.

$("#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 customized kinds to the info columns and headings.

$("#example").jdbssDropdown({

  headingclass: [],
  dataclass: [],

});

6. Customize the caret kinds. Can be both ‘bootstrap’ or ‘fontawesome’.

$("#example").jdbssDropdown({

  display: {
    caret: "bootstrap",
    virtual_width: "300px",
    display_width: "container"
  },

});

7. Callback capabilities.

$("#example").jdbssDropdown({

  dropdownopened_callback: function () {
    // do something 
  },
  
  dropdownclosed_callback: function () {
    // do something 
  },

  rowselected_callback: function () {
    // do something 
  },

});

Dynamic Multi-column Dropdown Plugin, jquery multi column dropdown Github, bootstrap multiselect dropdown, multiselect dropdown with checkbox jquery plugin


See Demo And Download

Official Website(jbils001): Click Here

This superior jQuery/javascript plugin is developed by jbils001. For extra Advanced Usages, please go to the official website.

Share