Multi-select Dropdown List Plugin For jQuery and Bootstrap - dyndropdown

dyndropdown is a jQuery & Boostrap plugin for creating a nice clean multiple selectable dropdown list that loads options from a JSON object based data structure. This allows for a dropdown that has dynamic values, that can be updated anytime through a json structure.

How to use it:

1. Include the jQuery javascript library and jQuery dyndropdown plugin's files in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="jquery.dyndropdown.css">
<script src="jquery.dyndropdown.js"></script>

2. Include the required Twitter Boostrap framework in the web page.

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<script src="js/bootstrap.min.js"></script>

3. Create an empty container element where you want to render a dropdown list that has dynamic values.

<div id="demo"></div>

4. Create option data using JSON with the following format.

<script type="text/javascript">
var json_code = JSON.stringify({
option_a: {name: 'Option 1'},
option_b : {
name: 'Option 2',
values: {
response_a: 'a',
response_b: 'b'
}
},
option_c : {
name: 'Option 3',
values: {
response_a: 'c',
response_b: 'd',
response_c: 'e'
}
}
});
</script>

5. Initialize the plugin.

<script type="text/javascript">
$(function(){
var simple = $('#demo').dyndropdown();
simple.setStructure(json_code);
});
</script>

6. Available options.

label: "Action", // Label that will appear on the button (or on the menu top in case we are using the plugin without button dropdown.
dropup: false, // Indicates if the dropdown should dropup.
single_choice: true, // Indicates if multiple selection should be allowed
left_centered_dropdown: false, // Indicates if the dropdown should open to the left, instead of the right.
size: null, // Indicates the width of the button eg. '100px'. Can also be a percentage, eg. '100%'.
button_dropdown: true, // Indicates if we have a button dropdown, or instead just the dropdown as a menu.
onSelectionChanged: null, // Indicates if we should always have one option selected of every kind.
alwaysOneOption: false // Callback that is executed when there's a change on the menu selections. Receives as input an object with all the selections. E.g. function(selection){ }

7. APIs

setStruture(json) // Defines a new structure for the dropdown using a JSON object.
getSelection() // Returns the selected options on a JSON manner javascript object.

---

This awesome jQuery plugin is developed by bioinformatics-ua. For more Advanced Usages, please check the demo page or visit the official website.