Tiny Customizable Dropdown Select Box With jQuery - Selectpick

Selectpick is a simple, lightweight, fast jQuery plugin that allows you to create customizable and easy-to-style dropdown select boxes with ease.

Features:

• Can be attached to any HTML elements;
• Custom data sources.
• Allows to asynchronously load data via AJAX.
• Allows to select options programmatically.
• Custom styles.

Basic usage:

1. Add the jQuery Selectpick plugin's files along with the latest version of jQuery library into the webpage.

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

2. Attach the plugin to a regular select box:

<select name="select" id="select">
  <option value="1">jQuery</option>
  <option value="2">Vanilla JavaScript</option>
  <option value="3" disabled="true">C++</option>
</select>

$('#select').Select();

3. You're able to attach the plugin to any HTML element just like input field:

<input type="text" id="select2" value="0">

$('#select2').Select({
  model: [{
    text: "Select",
    value: "0"
  },{
    text: "jQuery",
    value: "1"
  },{
    text: "JavaScript",
    value: "2"
  }]
});

4. Set the width/height of the dropdown select box.

$('#select').Select({
  width: 300,
  height: 60
});

5. API methods.

// set value
$('#select').trigger('set','0');

// set value
$('#select').setValue(0)

// add data
$('#select').addData(val, txt, disabled);

// set data
$('#select').setData(data);

---

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