Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Yet another CSS-customizable select plugin for jQuery. But this one is more native than the rest.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 demo Fixes IE7 bug where toggling of yaselect-open/close classes could go … July 18, 2011
Octocat-spinner-32 README.md
Octocat-spinner-32 jquery.yaselect.js
Octocat-spinner-32 jquery.yaselect.min.js
README.md

Yet-Another [jQuery] Select

Native

yaselect provides a CSS customizable select box, while introducing minimum HTML & keeping maximum widget usability -- native support for arrow keys, search-as-you-type, scroll wheel, proper z-index, etc.

Long

Regular "select box styling" scripts uses unnecessary markups like ul & li to render select options. This approach means having to add reams of javascript to create new html elements, copy option values into those elements, manage arrow keys, pass chosen option values back into hidden input fields.

Was iframe shims added to manage z-index issues? Is there support for search-as-you-type? What if ajax scripts changes the select options?

Short

yaselect uses the actual select widget for displaying options, after activating it's size attribute. That is it.

Usage

Given a select box,

<!-- your select tag -->
<select style="position: absolute; top: ?px; left: ?px; display: none; " class="yaselect-select" size="?">
  <!-- your option tags -->
</select>

Include jQuery, yaselect script & apply it to your select element

<script src="jquery.min.js"></script>
<script src="jquery.yaselect.min.js"></script>
<script>
  jQuery('select').yaselect();
</script>

Result

Your select will become

<div class="yaselect-anchor" style="position: relative;">
  <div class="yaselect-wrap yaselect-?" tabindex="0">
    <div class="yaselect-current"><!-- current selection --></div>
  </div>
  <!-- your select tag -->
  <select style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; " class="yaselect-select" size="?">
    <!-- your option tags -->
  </select>
</div>

`

Bonus tip

If you prefer your select to automatically resize to longest option element, you can simply do

$('.yaselect-anchor').each(function(){
  $(this).width($('select', this).width()+20); // 20px padding for arrow, adjust to match CSS
});

This tip is provided by @spaceninja in #6

Homepage

http://github.com/choonkeat/yaselect

License

Copyright (c) 2011 Chew Choon Keat, released under the MIT license

Something went wrong with that request. Please try again.