jquery-prettyselect
v1.6.0
Published
Makes select elements pretty.
Downloads
15
Maintainers
Readme
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="{"id": "23", "text":"鄂州市"}">鄂州市</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