zelect is a jQuery plugin that replaces the default select element into something much more simpler and fancier.

If the option list is known on the client, finite and manageable, use HTML:

<select id="select-backed-zelect">
  <option value="first">First Option</option>
  <option value="second">Another Option</option>
  <option value="third" selected="selected">Third option</option>
</select>

$('#select-backed-zelect').zelect()

Asyncronous Paged Setup

If the option list is server-backed, infinite or close to it, use opts.loader:

<select id="async-backed-zelect"></select>

$('#async-backed-zelect').zelect({
  initial: 'Third',
  loader: function(term, page, callback) {
    callback(['First for page '+page, 'Second', 'Third'])
  }
})

Callback expects an array. Elements in the array can be anything that renderItem can handle.

zelect will load the next page of results from opts.loader whenever the option list is scrolled to the bottom. It will stop trying to load more once the callback is called with an empty array.

Read more:https://github.com/mtkopone/zelect