jquery-prettyselect

Html replace to make select elements pretty.

Also works with zeptojs

Usage

$('select').prettyselect();

The select element is still present and hidden ( and works as the Model for the Html View), hence can be used to bind events or listen changes.

Options

onlyValuedOptions

(default: false)

It is possible to avoid selecting <option> elements that don't have the value attribute

$('select').prettyselect({
	onlyValuedOptions: true
});

Class Names

It is possible to change the basic class names used by the plugin.

$('select').prettyselect({
	wrapClass: 'prettyselect-wrap',
	labelClass: 'prettyselect-label',
	dropClass: 'prettyselect-drop'
});

Placeholder

It is possible to specify one of the <option> elements as the placeholder, with the data-placeholder attribute. This element would not be selectable and will disappear after the user makes the first selection

<select name="" id="">
	<option value="1" data-placeholder>a</option>
	<option value="2">b</option>
	<option value="3">c</option>
</select>

Disabling

After instantiation, it is possible to disable the select with the 'disable' command. The clicks on this element shoud not trigger changes

$('select').prettyselect('disable');

To undo disabling, there's the enable command

$('select').prettyselect('enable');

Updates

1.5

• Added a class to the wrapper to distinguish between drop open and drop closed state
• Exported prettyselect also a AMD module, if in an AMD ecosystem.

1.4

• When there are classes on the option elements, those are copied to the li's. (And kept in sync)
• Prettyselect label resets on selection lost
• Fix: update the selected value when the [selected] attribute is manually written on a option element

1.3

• Zeptojs is supported

1.2

• Added the disabled method
• size optimizations
• triggered native change event to better integrate with other frameworks.

1.1.4

Fixed bug where json objects are used as option's value

<option value="{&quot;id&quot;: &quot;23&quot;, &quot;text&quot;:&quot;鄂州市&quot;}">鄂州市</option>

1.1.3

• Added onlyValuedOptions option
• Added data-prettyselect-elements to the wrapper to expose the counter of option elements in the select
• Automatically detects change in the native select options (and rebuild the DOM), using MutationObservers or a dirty polyfill