FancyDropdown

A small jQuery-based library that allows you to create a relatively more style-able dropdown.

Demo | GitHub | NPM

Usage

Import the CSS and JS alongwith jQuery.

<!-- The import methods may vary but in case of vanilla HTML, for example: -->
<link rel="stylesheet" href="node_modules/fancy-dropdown/css/index.css">
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="node_modules/fancy-dropdown/js/index.js"></script>

Add the class fancy-dropdown and the options passed to a readonly input field like so:

<input type='text' class='fancy-dropdown' data-fd-options="['foo', 'bar']" readonly />

and it gets transformed into a slightly fancier looking dropdown that looks something like:

<div class="fancy-dropdown-wrapper">
  <input type='hidden' name='fd_0' /> <!-- Contains the actual value -->
  <input type='text' class='fancy-dropdown' readonly /> <!-- Contains the visible value -->
  <div class="fancy-dropdown-options"> <!-- Contains the options -->
    <ul class="options-list">
      <li class="option-item" data-value="0">foo</li>
      <li class="option-item" data-value="1">bar</li>
    </ul>
  </div>
</div>

Dropdown Options

The options can be passed through the data-fd-options that can either be an array or a JSON object like so:

<input type='text' class='fancy-dropdown' data-fd-options="{'top': 'teemo', 'mid': 'gangplank'}" name="favorite-champions" readonly />

Which converts the input field to:

<div class="fancy-dropdown-options">
  <ul class="options-list">
    <li class="option-item" data-value="teemo">top</li>
    <li class="option-item" data-value="gangplank">mid</li>
  </ul>
</div>

Name Attribute

By default, FD sets a unique name attribute for the hidden input field that can be processed through a form but you can also set one explicitly by giving the input text field a name:

<input type='text' class='fancy-dropdown' data-fd-options="['arcane', 'cowboy bebop']" name="favorite-shows" readonly />

Which sets the hidden input field's name attribute:

<input type='hidden' name='favorite-shows' />

Known Issues

None for now

License

MIT