Press "Enter" to skip to content

Optimized for Bootstrap 5 Dropdown Select Box | dselect

dselect is a JavaScript library that adds advanced features (such as direct search, dynamic generation, and field validation) to native Bootstrap 5 select boxes.

bootstrap 4 select dropdown, bootstrap dropdown select, bootstrap selectpicker, bootstrap dropdown not working, bootstrap select dropdown with search, multiple select dropdown bootstrap

Features:

  • Placeholder
  • Multiple
  • Search
  • Creatable
  • Clearable
  • Sizing
  • Validation

How to make use of it:

1. Add the dselect’s JavaScript and CSS to your Bootstrap 5 undertaking.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- dselect -->
<link rel="stylesheet" href="css/dselect.css" />
<script src="js/dselect.js"></script>

2. Initialize the choice on the goal choose the field and accomplished.

<select class="form-select" id="example">
  <option value="1">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  <option value="4">Bootstrap</option>
  <option value="5">Tailwind</option>
</select>
dselect(document.querySelector('#example'))

3. Enable the stay search function.

dselect(document.querySelector('#example'),{
  search: true
})

4. You may also add extra choices to the chosen field by enabling the creatable possibility.

dselect(document.querySelector('#example'),{
  creatable: true
})

5. Determine whether or not they chosen field is clearable.

dselect(document.querySelector('#example'),{
  clearable: true
})

6. Set the size of the chosen field.

dselect(document.querySelector('#example'),{
  maxHeight: '360px',
  size: '', // 'sm' or 'lg'
})

7. You may also go the choices by way of HTML information attributes as follows:

<select class="form-select" id="example"
        data-dselect-search="true"
        data-dselect-max-height="300px">
  ...
</select>

Enhanced Dropdown Select Box For Bootstrap 5, dselect Plugin/Github


See Demo And Download

Official Website(jarstone): Click Here

This superior jQuery/javascript plugin is developed by jarstone. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.