Boostrap Multi Select - Introduction.

Boostrap multiselect plugin is very nice select tool that can use in web development with various customizable features. 

Customizable options of this plugin.

• multiple
• maxHeight
• buttonClass
• buttonContainer
• buttonWidth
• buttonText
• buttonTitle
• nonSelectedText
• nSelectedText
• allSelectedText
• numberDisplayed
• delimiterText
• optionLabel
• optionClass
• selectedClass
• includeSelectAllOption
• selectAllJustVisible
• selectAllText
• selectAllValue
• selectAllName
• selectAllNumber
• onSelectAll
• onDeselectAll
• enableFiltering
• enableCaseInsensitiveFiltering
• enableFullValueFiltering
• filterBehavior
• filterPlaceholder

First of all you need to add the fllowing libraries in your web page's head tag . 

1.  jQuery
2. Twitter Boostrap

1. <!-- Include Twitter Bootstrap and jQuery: -->
2. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
3. <script type="text/javascript" src="js/jquery.min.js"></script>
4. <script type="text/javascript" src="js/bootstrap.min.js"></script>
5.  
6. <!-- Include the plugin's CSS and JS: -->
7. <script type="text/javascript" src="js/bootstrap-multiselect.js">
8. </script>
9. <link rel="stylesheet" href="css/bootstrap-multiselect.css"
10. type="text/css"/>

Then you can create a select and add the plugin to it.

1. <select id="exampleOne" multiple="multiple">
2. <option value="Colombo">Colombo</option>
3. <option value="London">London</option>
4. <option value="Sydney">Sydney</option>
5. <option value="Tokyo">Tokyo</option>
6. <option value="Paris">Paris</option>
8. </select>

Now Call the plugin in your javaScript section.

1. <!-- Initialize the plugin: -->
2. <script type="text/javascript">
3. $(document).ready(function() {
4. $('#exampleOne').multiselect();
5. });
6. </script>

We also can use this as a single select with radio buttons.

The only thing you have to do is remove multiple="multiple" part from the
select initialization.

I will explain about more features of this plugin in my next posts.

Byeee :)