JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://fendykusuma.com/js/easydropdown.css">
<script src="http://fendykusuma.com/js/jquery.easydropdown.min.js"></script>
<!-- Bootstrap -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<br/><hr/><br/>

<!-- Easy Dropdown -->
<select id="easyselect" class="thedropdown">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

JavaScript

$(function(){
    var $selects = $('#easyselect');

    $selects.easyDropDown({
        cutOff: 10,
        wrapperClass: 'thedropdown',
        onChange: function(selected){
            // do something
        }
    });
});