Script.aculo.us Select Box

Overview

This javascript class allows you to replace HTML select control with a nice styled select boxes in a HTML page.

This class is based on Prototype and its mandatory to use Scriptaculous because its inherits from Autocompleter.Base
It also works with prototype 1.5 and scriptaculous 1.7

It has been tested on Firefox 1.5 and 2, Mozilla, Camino 1.03, IE6, IE7 and Konqueror.

Current Version 0.3 (30/01/2007), see changelog for more detail

Features

Replace old and ugly select controls
Visual effects
Skinnable
Extensible
Generates XHTML valid code

How to Use

It's easy, like scriptaculous just need to include 2 files and this extension, and the styles associated with autocomplete.

					
<script type="text/javascript" src="/javascripts/prototype.js"> </script>
<script type="text/javascript" src="/javascripts/scriptaculos.js"> </script>

<!-- link to scriptaculous select scripts  -->
<script type="text/javascript" src="/javascripts/select.js"> </script>

<!-- link to autocomplete style sheet -->
<link href="/styles/autocomplete.css" rel="stylesheet" type="text/css"></link>

And in our page just make a call like this one to have a nice, style select box :D

					
new Autocompleter.SelectBox('id_of_select_control');

As this class inherits from Autocomplete.Base, you can use all options of this, except for afterUpdateElement, aditionally, you have optional parameters (see documentation):

Download

All files used in this proyect are here in two differents formats:

License

This extension is licensed under a MIT-style license, so you can use it for anything you like, as long as you include the copyright notice.

Tanks To

Thomas Fuchs for scriptaculous
Cristian Camplone
Andreas Köhler for testing and ideas
Khurram Khan for ideas and comments
Huy Tong and Jon Zoss for testing