wdmg/bootstrap-selectinput-plugin

Bootstrap 3 的下拉列表选择器

1.2.1 2020-04-27 08:14 UTC

This package is auto-updated.

Last update: 2024-09-27 17:54:04 UTC


README

Bootstrap 3 的下拉列表选择器

安装

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

使用示例

例如使用 form-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>

... 并从脚本中初始化

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

选项

状态和版本

  • v.1.2.1 - 修复了从 json 中获取的自动完成值
  • v.1.2.0 - 重构,添加自动完成功能
  • v.1.1.1 - 修复 OnChange 错误
  • v.1.1.0 - 添加主选择器的 on change 值