npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-prettyselect

v1.6.0

Published

Makes select elements pretty.

Downloads

15

Readme

jquery-prettyselect

Build Status

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