Simple Animated jQuery Select Menu Plugin - Select Extended

Select Extended is a simple-to-use jQuery plugin that creates animated, customizable, select style dropdown menus from input fields and html lists. Also can be used as an alternative to the default select box.

How to use it:

1. Load the jQuery Select Extended plugin's CSS file in the head section of the document.

<link rel="stylesheet" href="css/select.css">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/select.js"></script>

2. The basic markup structure.

<div id="example" class="example">
  <input type="hidden" name="" value="">
  <button>
    <span>Select</span>
    <span class="caret"></span>
  </button>
  <ul>
    <li value="1">Option 1</li>
    <li value="2">Option 2</li>
    <li value="3">Option 3</li>
  </ul>
</div>

3. Load the jQuery Select Extended plugin's script after jQuery library but before the closing body tag.

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

4. Call the function on the top element and we're ready to go.

$("#example").selectX();

5. Add animations (fade or slide) to the select menu.

$("#example").selectX({
  animate: "slide" // or fade
});

6. Make the select menu opened on page load.

$("#example").selectX({
  open: true
});

7. Set the pre-selected option.

$("#example").selectX({
  selected: "option1"
});

8. Callback function available.

$("#example").selectX({
  onClose: function () {},
  onOpen: function () {},
  onSelect: function () {}
});

---

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