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>