jQuery Selectpick

Fast, simple and light jQuery plugin
to customize HTML selects

How to use

  • 1. Make sure to include jQuery in your page:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  • 2. Include jQuery Selectpick:

    <script src="selectpick.min.js"></script>
  • 3. Include jQuery Selectpick styles, and change it to your taste :D (please refer to our demo page for more themes and other customizations)

    <link rel="stylesheet" href="selectpick.css">
  • 4. Initialize jQuery Selectpick:



You can pass an options object as the first parameter when you call the plugin. For example:

        width: 100,
        height: 30


The parameters is shown as follows:

Public methods

Basic usage

    maxHeight: 100

Other types of Elements

You can also change other types of original element into a Selectpick plugin, just like the <input> element shown on the left.

<input id="other" value="0">

We encapsulate the implementation details,what you need to do is as follows:

    width: 390,
    height: 30,
    model: [
        "text": "Strawberries",
        "value": "0",
        "disabled": true
        "text": "Mango",
        "value": "1"
        "text": "Bananas",
        "value": "2"
        "text": "Watermelon",
        "value": "3"

Get selected option value

Current value:

// Cache the target element
var $selectValue = $('#select_value').find('strong');

// Get initial value

// Initialize Selectpick and bind to 'change' event
$('#get_value').change( function() {

Set value

// Initialize Selectpick
//Bind the click event to button,and trigger the 'set' event of origin element
$('#set_first_option').on('click', function() {
$('#set_second_option').on('click', function() {
$('#set_third_option').on('click', function() {

//Or you can also call the Selectpick Prototype method directly.
var $set_value = $('#set_value').Select()[0];

// Then call the setValue() method.
$('#set_first_option').on('click', function () {
$('#set_second_option').on('click', function () {
$('#set_third_option').on('click', function () {

Change options on the fly

//Change options on the fly
var $dynamic = $('#dynamic').Select()[0];

$('#bt_add_val').click(function () {
    // Store the value in a variable
    var value = $('#add_val').val();

    // Append to original select

Populate via ajax request

//Populate via ajax request
var $ajaxitem = $('#ajaxitem').Select()[0];
    url: "file.json",
    dataType: 'json',
    success: function (result) {
    error: function (xhr) {
        alert("Error Message: " + xhr.status + " " + xhr.statusText);