/bootstrap-selectinput

Select to dropdown list for Bootstrap 3

Primary LanguageJavaScriptMIT LicenseMIT

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.1.1 - OnChange bugfix
  • v.1.1.0 - Added on change value of main select