SelectScroll v1.2 Mack Pexton August 28, 2004

Introduction

The make_select_scroll() function turns any HTML <select> field into a scrolling field. It adds a button to the top of the list and the bottom of the list that scroll the list of options when the user hovers over the buttons.

make_select_scroll() also accepts two optional functions; one to add an item to the select list at the top and a function to add an item to the select list at the bottom.

Unfortunately, the scrolling only works in Firefox. Other browsers do not pay attention to event listeners attached to <option> tags.

Other browsers simply have an option with a minus sign inserted at the top of the list and an option with a plus sign inserted at the end of the list. Clicking on the + or - options repopulates the option list with the next or previous sequence of options. The + and - can be changed by setting make_select_scroll.scroll_up_button_IE and make_select_scroll.scroll_down_button_IE to your own values.

Example

Select Year 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008

The above drop-down list was created with the following code:

<script src="selectScroll.js" type="text/javascript"></script>

<label for="year">Select Year</label>
<select name="year" id="year" class="navigation">
 <option value="1999">1999</option>
 <option value="2000">2000</option>
 <option value="2001">2001</option>
 <option value="2002">2002</option>
 <option value="2003">2003</option>
 <option value="2004" selected="selected">2004</option>
 <option value="2005">2005</option>
 <option value="2006">2006</option>
 <option value="2007">2007</option>
 <option value="2008">2008</option>
</select>
<script type="text/javascript">make_select_scroll('year')</script>