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:

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

Options

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

 $('#select').Select({
        width: 100,
        height: 30
 });

API

The parameters is shown as follows:

Public methods

Basic usage

$('#basic').Select({
    width:350,
    height:30,
    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:

('#other').Select({
    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
$selectValue.text($('#get_value').val());

// Initialize Selectpick and bind to 'change' event
$('#get_value').change( function() {
        $selectValue.text($(this).val());
}).Select();

Set value

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


//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_value.setValue(0);
});
$('#set_second_option').on('click', function () {
    $set_value.setValue(1);
});
$('#set_third_option').on('click', function () {
    $set_value.setValue(2);
});

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
    $dynamic.addData(value);
});

Populate via ajax request

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

file.json文件如下: