Namespace: Dropdown

ML. Dropdown

Custom select. If the <select> has a class name of system, a custom select will not be created. This script changes all select menus and creates an HTML menu. Events bound to the <select> are bound to the custom select menu. Events supported: focus, blur and change. See it in action + some notes! 😀

Examples

<select id="fruits" name="fruits">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="strawberry">Strawberry</option>
</select>

The script is initialized on page load, but if new <select> are added, use the line below:

ML.Dropdown();

The markup the plugin creates:

<div class="dropdown" data-value="apple" style="width: 114px;">
  <a href="#" class="dropdown-link" tabindex="-1" data-index="0">apple</a>
  <ul class="dropdown-menu">
    <li data-value="apple" data-index="0"><a href="#" tabindex="-1">Apple</a></li>
    <li data-value="orange" data-index="1"><a href="#" tabindex="-1">Orange</a></li>
    <li data-value="strawberry" data-index="2"><a href="#" tabindex="-1">Strawberry</a></li>
  </ul>
</div>