This time I will share jQuery Plugin and tutorial about Create Select Like Bootstrap Dropdown With jQuery – Dropselect, hope it will help you in programming stack.
Dropselect is a jQuery plugin that makes the default Bootstrap dropdown component act like the select element and allows to select options programmatically.
How to use it:
1. The plugin requires jQuery library and Bootstrap framework loaded correctly in the webpage.
1 |
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/bootstrap.min.js"></script> |
2. Load the JavaScript file jquery.dropselect.js after jQuery library.
1 |
<script src="src/js/jquery.dropselect.js"></script> |
3. Insert a hidden input field to the Bootstrap dropdown as this:
01 |
<div id="vegetable-select" class="dropdown dropselect"> |
02 |
<input type="hidden" name="vegetable" value=""> |
03 |
<button class="btn btn-default dropdown-toggle" type="button" id="vegetable" data-toggle="dropdown" aria-expanded="true"> |
04 |
<span class="dropdown-label">Dropdown</span> |
05 |
<span class="caret"></span> |
07 |
<ul class="dropdown-menu" role="menu" aria-labelledby="option-post-cleanup"> |
08 |
<li role="presentation"><a data-value="broccoli" data-selected="selected" role="menuitem" tabindex="-1">Broccoli</a></li> |
09 |
<li role="presentation"><a data-value="spinach" role="menuitem" tabindex="-1">Spinach</a></li> |
10 |
<li role="presentation"><a data-value="cabbage" role="menuitem" tabindex="-1">Cabbage</a></li> |
11 |
<li role="presentation"><a data-value="" role="menuitem" tabindex="-1">None</a></li> |
4. Active the plugin. When user selects an option, a hidden input named “vegetable” with the selected value is created.
1 |
$('.dropselect').dropselect(); |
5. Get the selected value.
1 |
var value= $('#vegetable-select').dropselect('value'); |
6. Select a specific option.
1 |
$('#vegetable-select').dropselect('select','spinach'); |
7. Event.
1 |
$('#vegetable-select').on('change', DoSomething); |
Change log:
2017-08-10
This awesome jQuery plugin is developed by vkucukcakar. For more Advanced Usages, please check the demo page or visit the official website.
