jQuery plugin "bootstrapSelect" which transform a select element in a bootstrap dropdown with colors, search field If the multiple attribute is provided in the select element then you get css checkboxes...

Demo : https://philippemarcmeyer.github.io/bootstrapSelect/.

Transform an HTML select into a bootstrap dropdown the select is hidden and the chosen value is also available in it as they are binded

v0.88 : Changed check marks design

v0.87 : Added new option => "placeHolder": to show when nothing is selected

v0.86 : Added new command => "destroy": to remove the bsSelect

v0.85 : Added new option => "search": true (default is false) to show a search box

v0.84 : Added new option => "maxHeigth": 150 (default is 400) to set a scrollbar for very long dropdowns

v0.83 : in case of multiple choice, the menu stays open until outside click

v0.82 : Translations : the word "items" can be replace and the world "all" in options (2nd param)

$("#multChoice").bootstrapSelect("init", { "translations" :{ "all": "All checked", "items": "Values" }});

When all the items have been checked, the word "all" or its translation appears instead of "n items"

v0.81 : with multiple choice, now uses the size attribute of the select tag : when the selected items are <= size they are listed all in the header when the list length > size it shows 'x items' to prevent the header to grow and mess with the UI ! setValue action in multiple mode allows only to deselect every option

v0.80 : 2019-07-17 => now supports multiple attribute : just put multiple in the select tag (uses awesome fonts)

v0.76 : 2018-09-19 => debug in setValue : the color was wrong

v0.75 : 2018-09-18 => adding a tooltip plus showOption and hideOption

$("#status").bootstrapSelect("init", { "tooltip": { "message": "hello World !", "position": "top" } });

		$("#status").bootstrapSelect("hideOption","walking")

	Hides the option whitch value="walking"

		$("#status").bootstrapSelect("showOption","walking")

	Shows back the option whith value="walking"

v0.7 : 2018-09-14 => Colors thru classes put in the options (much simpler)

v0.6 : 2018-09-06 => added a setValue action

Actions available :

init : transforms an input select into a bootstrap dropdown. In order to display colors, simply add a data-color attribute to the select options.

 $("#status").bootstrapSelect("init", { "colors": "on", "className": "bs-select", "maxWidth": 300 });

with v0.7 , just set colors to "off" to use classes instead

• colors : on || off default is off
• className : default is none, you can use bs-select which is provided in the bootstrapSelect.css file
• maxWidth : integer is 500, determines the max with of the menu part, which expands otherwise up to the width of its container.

$("#status").bootstrapSelect("setValue","one,two,anything");

$("#status").bootstrapSelect("setValue","all");

$("#status").bootstrapSelect("setValue","");

$("#status").bootstrapSelect("empty");

• disables the menu

$("#status").bootstrapSelect("disable");

• enables the menu

$("#status").bootstrapSelect("enable");

The result is retrieved on the hidden input select :

var result = $("#status").val();

Demo : https://philippemarcmeyer.github.io/bootstrapSelect/.

That's all Folks !