Tiny Customizable Dropdown Select Box With jQuery - Selectpick

Tiny Customizable Dropdown Select Box With jQuery - Selectpick
File Size: 27 KB
Views Total: 1412
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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


  • 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>

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

<input type="text" id="select2" value="0">
  model: [{
    text: "Select",
    value: "0"
    text: "jQuery",
    value: "1"
    text: "JavaScript",
    value: "2"

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

  width: 300,
  height: 60

5. API methods.

// set value

// set value

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

// set data

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