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