Select Improvement

A script to make custom selects. I will refactor it someday. I put it here in case it's useful to someone now.

Download select-improvement.zip (21k)

Usage

Include improvement.css, jquery.js, and improvement.js. in your document

Add class="improve" to your form.

What Happens

This:

<select name="favday">
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed" selected="selected">Wednesday</option>
    <option value="thu">Thursday</option>
    <option value="fri">Friday</option>
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
    <option>Another Day</option>
</select>

Becomes:

<input id="favday" name="favday" value="wed" type="hidden" />
<div rev="favday" class="improved-selection">
    <strong>Wednesday</strong>
    <ul class="improved-container">
        <li><a rel="mon" href="#">Monday</a></li>
        <li><a rel="tue" href="#">Tuesday</a></li>
        <li><a rel="wed" href="#">Wednesday</a></li>
        <li><a rel="thu" href="#">Thursday</a></li>
        <li><a rel="fri" href="#">Friday</a></li>
        <li><a rel="sat" href="#">Saturday</a></li>
        <li><a rel="sun" href="#">Sunday</a></li>
        <li><a rel="Another Day" href="#">Another Day</a></li>
    </ul>
</div>

Demo