Custom HTML select box based on twitter bootstrap components.
It's quite simple and will take few minutes :)
The next steps assume that you have already include jQuery and Bootstrap on your page.
Download and include boot-select.css and boot-select.js on your page:
<html>
<head>
...
<link rel="bootstrap.css">
<link rel="boot-select.css">
...
</head>
<body>
...
<select id="your-select">
<!-- options -->
</seelct>
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="boot-select.js"></script>
</body>
</html>$(function() {
$('#your-select').bootSelect(/* options */)
});That's it :) Profit!
Simply include nanoScroller on your page and ugly browser scroll would replaced with nice scroll :)
$('#your-select').bootSelect({
enableClear: true,
keyboardNavigation: true,
placeholder: 'Выберите из списка',
clearButton: '×',
toggleButton: '<i class="icon-angle-down"></i>',
onInit: function () {
// your own logic here...
},
onChange: function () {
// your own logic here...
}
});enableClear - Show clear button near caret icon.
keyboardNavigation - Enable esc return up and down keyboard buttons, when dropdown list is activated
placeholder - Placeholder text/html. Showing when nothing selected or <select> cleared.
clearButton - text/html for clear button
toggleButton - text/html for toggle button. By default it is one of Font-Awesome icon. You can change it to any Bootstrap icon.
onInit function - Called, when sets selection of selected default option.
onChange function - Called, when selected option was changed.
clear - Clear selected value, or if select not have empty option set selectedIndex to -1
select - Select value. Accepts one argument - value of option, native <option>, or <option> wrapped with jQuery
update - Use this, when you add/remove options on your select dynamically (for example, you manually add option via $('#your-select').append('<option value="new">New</option>) )
toggle - Toggle show/hide dropdown
show - Show dropdown. Known issue: doesn't work properly
hide - Hide dropdown
Usage of methods:
$('#your-select').bootSelect('clear');
...
$('#your-select').bootSelect('select', 'value');- jQuery (tested on 1.9.1)
- Bootstrap (2.3.1 or 2.3.2)
- (optional) nanoScroller (tested on 0.7.2)
- Support of
<optgroup>tag
You can request any additional functionality with the [issue](You can request any additional functionality with the issue and if it will be useful, I'll try to implement it.) and if it will be useful, I'll try to implement it.