Bootstrap-selectinput-plugin NPM

Bootstrap SelectInput

Select to dropdown list for Bootstrap 3

Installation

$ npm install bootstrap-selectinput-plugin
$ bower install bootstrap-selectinput-plugin
$ yarn add bootstrap-selectinput-plugin
$ composer require bootstrap-selectinput-plugin

Usage example

For example use the input-group:

<div class="form-group">
    <label class="control-label" for="selectinput1">Select:</label>
    <select id="selectinput1" class="form-control">
        <option value="1">Select option one</option>
        <option value="2" selected>Select option two</option>
        <option value="3">Select option three</option>
        <option value="4" disabled>Select option one</option>
        <option value="5" selected>Select option two</option>
        <option value="6">Select option three</option>
    </select>
</div>
<div class="form-group">
    <label class="control-label" for="selectinput2">Multiple select:</label>
    <select id="selectinput2" multiple class="form-control">
        <option value="1">Select option one</option>
        <option value="2" selected>Select option two</option>
        <option value="3">Select option three</option>
        <option value="4" disabled>Select option one</option>
        <option value="5" selected>Select option two</option>
        <option value="6">Select option three</option>
    </select>
</div>

... and init from script:

<script type="text/javascript">
    $(document).ready(function () {
        $('select').selectinput({
            dropdownClass: '.dropdown .some-dropdown',
            toggleText: 'Select option',
            toggleCaret: '<span class="fa fa-chevron-down"></span>',
            ...
        });
    });
</script>

Options

Name	Type	Default	Description
dropdownClass	string	'.dropdown'	The class for the dropdown container.
listClass	string	'.dropdown-menu'	Class for dropdown list.
itemClass	string	'.dropdown-item'	Class for the item in the dropdown list.
toggleClass	string	'.btn .btn-default .dropdown-toggle'	Class of the button for expanding the dropdown.
toggleText	string	'Dropdown'	Default text of the toggle button.
toggleCaret	html	`<span class="caret"></span>`	Default caret of the toggle button.
toggleChange	boolean	`true`	Flag if need to change the toggle button text.
onChange	function	`onChange()`	The function that is called when select option change.
onShow	function	`onShow()`	The function that is called when dropdown is ready to be displayed.
onShown	function	`onShown()`	The function that is called when dropdown is displayed.
onHide	function	`onHide()`	The function that is called when dropdown to prepare for hiding.
onHidden	function	`onHidden()`	Flag if need debug in console log.
debug	boolean	`false`	The function that is called when dropdown is hidden.

Status and version

v.1.0.1 - Plugin in progress development

twitter-bootstrap bootstrap select dropdown

bootstrap grunt-autoprefixer grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-sass grunt-contrib-uglify-es grunt-contrib-watch grunt-css jquery

@everything-registry/sub-chunk-1254 @zalastax/nolb-bootstra

1.0.1

5 years ago