Droplect.js Official Samples

Presenting single-selection and multi-selection modes. You can find more info at Webapper/droplect-js GitHub repository.

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://rawgit.com/Webapper/droplect-js/master/src/droplect.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Webapper/droplect-js/master/src/droplect.css">
<h1>Droplect.js Official Samples</h1>
<p>
You can find more info at <a href="https://github.com/Webapper/droplect-js" target="_blank">Webapper/droplect-js</a> GitHub repository.
</p>
<h2>Single-selection Droplect</h2>
<div class="dropdown">
     <input type="hidden" id="tricky" name="my-no-more-selects">
     <button id="dLabel" type="button" class="btn btn-default btn-droplect" data-toggle="droplect" data-map-to="tricky" aria-haspopup="true" aria-expanded="false">
         Droplect trigger
         <span class="caret"></span>
     </button>
     <ul class="droplect dropdown-menu" aria-labelledby="dLabel">
         <li data-value="option-1"><a href="#">Action</a></li>
         <li data-value="option-2"><a href="#">Another action</a></li>
         <li data-value="option-3"><a href="#">Something else here</a></li>
         <li role="separator" class="divider"></li>
         <li data-value="option-4"><a href="#">Separated link</a></li>
     </ul>
 </div>
 <h2>Multi-selection Droplect</h2>
 <div class="dropdown">
    <button id="multisel-droplect" type="button" class="btn btn-default btn-droplect form-control" data-toggle="droplect" data-multiple="multiple" aria-haspopup="true" aria-expanded="false">Combine my options! <span class="caret"></span></button>
    <ul class="droplect dropdown-menu" aria-labelledby="multisel-droplect">
        <li class="dropdown-header">Choose something</li>
        <li data-value="option-1"><a href="#" class="checkbox"><label><input type="checkbox" name="multisel[]"...

CSS

.droplect-selection > .droplect-value {
  border: 1px solid #666;
  border-radius: 3px;
  display: inline-block;
  margin-left: 2px;
  margin-right: 2px;
  padding-left: 5px;
  padding-right: 5px;
  background: rgba(0, 0, 0, .1);
}