项目作者: hardskilled

项目描述 :
Extended Select for Bootstrap 4 (analog bootstrap-select)
高级语言: JavaScript
项目地址: git://github.com/hardskilled/bootstrap-hardskilled-extend-select.git
创建时间: 2017-12-28T11:20:57Z
项目社区:https://github.com/hardskilled/bootstrap-hardskilled-extend-select

开源协议:MIT License

下载


Extended Select for Bootstrap 4 (alternative bootstrap-select)

release version npm version License: MIT dependences devDependences

Demo and documentation

You can require bootstrap plugin via cdn or download the archive with release and unzip into assets directory.

For install via npm, use command:

  1. npm i --save bootstrap-hardskilled-extend-select

To use CDN:

  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-hardskilled-extend-select@latest/css/select.min.css">
  2. <script src="https://cdn.jsdelivr.net/npm/bootstrap-hardskilled-extend-select@latest/js/select.min.js"></script>

Example usage:

  1. <link rel="stylesheet" href="css/select.min.css">
  2. <script src="js/select.min.js"></script>
  3. <script>
  4. $('select').extendSelect();
  5. </script>

Usage with options:

  1. <link rel="stylesheet" href="css/select.min.css">
  2. <script src="js/select.min.js"></script>
  3. <script>
  4. $('select').extendSelect({
  5. // Search input placeholder:
  6. search: 'Find',
  7. // Title if option not selected:
  8. notSelectedTitle: 'Pls select',
  9. // Message if select list empty:
  10. empty: 'Empty',
  11. // Class to active element:
  12. activeClass: 'active',
  13. // Class to disabled element:
  14. disabledClass: 'disabled',
  15. // Custom error message for all selects (use placeholder %items):
  16. maxOptionMessage: 'Max %items elements',
  17. // Delay to hide message
  18. maxOptionMessageDelay: 2000,
  19. // Popover logic (resize or save height):
  20. popoverResize: true,
  21. // Auto resize dropdown by button width:
  22. dropdownResize: true
  23. });
  24. </script>
Key Description Default value
search Search input placeholder Search
notSelectedTitle Title if option not selected Nothing to shown
empty Message if select list empty Nothing to shown
activeClass Class to active element active
disabledClass Class to disabled element diabled
maxOptionMessage Custom error message for all selects (use placeholder %items) Limit reached (%items items max)
maxOptionMessageDelay Delay to hide message 2000
popoverResize Popover logic (resize or save height) false
dropdownResize Auto resize dropdown by button width false

To listen changes use .on(‘change’) event:

  1. $('select#basic').on('change', function () {
  2. const selected = $(this).find(':selected').text();
  3. $('#basicResult').text('Selected: ' + selected)
  4. })

HTML attributes to select:

  1. <select
  2. id="extendedSelect"
  3. class="form-control"
  4. data-live-search="true"
  5. data-max-options="2"
  6. data-max-options-message="Max items"
  7. data-live-search-placeholder="Find"
  8. data-hide-disabled="true"
  9. data-btn-class="btn-danger btn-block"
  10. data-input-group="true"
  11. data-not-selected="Select is empty"
  12. data-empty="Items not found"
  13. data-type="checkbox"
  14. multiple
  15. >
  16. <option selected>Rabbit</option>
  17. <option>Cat</option>
  18. <option class="get-class" disabled>Owl</option>
  19. <optgroup label="test" data-subtext="another test">
  20. <option>Spider</option>
  21. <option selected>Worm</option>
  22. <option>Fly</option>
  23. </optgroup>
  24. </select>
Attribute Description Default value
data-live-search Live search false
data-max-options Max selected options Nothing to shown
data-max-options-message Message if select limit overflow Limit reached (%items items max)
data-live-search-placeholder Search input placeholder Search
data-hide-disabled Hide disabled elements false
data-btn-class Button class for dropdown btn-secondary
data-not-selected Title if option not selected Nothing to shown
data-empty Message if select list empty Nothing to shown
data-type Custom select type (ex. checkbox) null
multiple Enable multiple selections false

Hire us via Upwork! | Our website