jQuery Plugin To Convert Select Elements Into Popup Lists - ul select

File Size: 5.13 KB
Views Total: 1311
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Convert Select Elements Into Popup Lists - ul select

ul select is a jQuery plugin that converts the boring select box into an easy-to-style popup list while maintaining the native select behavior.

How to use it:

1. To use this plugin, you need to load both jQuery library and the jQuery ui select plugin's script in the document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ul-select.js"></script>

2. Wrap the regular select element into a container element like this:

<div class="anyClass">
  <select>
    <option>Option 1 - Meat</option>
    <option>Option 2 - Fruit</option>
    <option>Option 3 - Vegetables</option>
    <option>Option 4 - Dairy Products</option>
    <option>Option 5 - Eggs + Fish</option>
    <option>Option 6 - Other</option>
  </select>
</div>

3. Call the function to activate the plugin.

$('.anyClass').ulSelect();

4. Adjust the size of the select element.

// small
$('.anyClass').ulSelect('small');

// medium
$('.anyClass').ulSelect('medium');

// large
$('.anyClass').ulSelect('large');

This awesome jQuery plugin is developed by JamesRDouglas. For more Advanced Usages, please check the demo page or visit the official website.