Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time


A jQuery plugin for fully customizable and clean looking select boxes. These are div based select boxes that will allow us to do additional things like adding icons to our options.

Related Plugins

  • wForm - See all the form plugins working together.
  • wInput - Input plugin that handles backwards compatability for placeholders.
  • wCheck - Radio and checkbox input plugin.
  • wChar - On the fly character counter for inputs.


Available options with notes, the values here are the defaults.

$.fn.wSelect.defaults = {
    theme: 'classic',         // theme
    size: '4',                // default number of options to display (overwrite with `size` attr on `select` element)
    labelPosition: 'left',    // set position for label (left,top)
    highlight: true           // highlight fields when selected


The plugin should work seamlessly with click or change events triggered from either end.

Include the following files:

<script type="text/javascript" src="./wSelect.js"></script>
<link rel="Stylesheet" type="text/css" href="./wSelect.css" />


If you add, remove or modify any HTML content for any of the select options you will require a refresh.

NOTE: if you modify a select value a reset is NOT required, only for visible elements like changing the HTML content of an option or adding or removing options.

$('#select').append('<option value="four">four</option>').wSelect('reset');


If a value is set manually using val() you will need to trigger a change event.


Or if you don't want to trigger the select elements change event just run the plugin change method to update only the visuals.



Icons can be added by setting an image path in the data-icon attribute for each option.

<option value="example" data-icon="/path/to/image.png">Example</option>

To leave an indent with no image set the data-icon attribute to an empty string.

<option value="example" data-icon="">Example</option>

Not setting the attribute at all will leave no indent and will appear normally.

<option value="example">Example</option>


Setting the size can be done by using the global defaults or setting the attribute size on the element directly.

$.fn.wSelect.defaults = {
    size: '5',

If the size attribute on the element is set it will overwrite the global value set in the defaults.

<select size="3">


You can set the width of the select elements explicitly by setting the width property via CSS.

.wSelect {
    width: 200px;

If you want a dynamic width for the select only set the min-width and max-width properties and make sure to NOT include the width property.

.wSelect {
    min-width: 100px;
    max-width: 200px;

CSS labels

Global CSS labels are also available in this plugin and can be used by setting an adding the class name wLabel-left, wLabel-top or wLabel-left-top to an element.

<label class="wLabel-left">Label:</label>



MIT licensed

Copyright (C) 2011-2013 Websanova


A jQuery select plugin


You can’t perform that action at this time.