Inside Technique : WebFX DHTML Demos : Custom SelectBox

Windows has a concept of an owner-drawn list-box. An owner-drawn listbox allows developers to customize how each item in a list is rendered. Unfortunately, the SELECT element supported by the current browsers only allows simple text for each item. In this article, we provide a DHTML version of the selectbox that works almost identically to the <SELECT> element with the added benefit of being completely customizable with HTML: Demonstration requires Netscape Navigator 4.0 or Internet Explorer 4.0

The custom selectbox is designed to be compatible with Netscape Navigator 4.0 by degrading gracefully to a standard select box. If you are running Netscape Navigator 4.0 you will see an ordinary select box. If you are not seeing any select box, then you are running an older version of the browser.

To the left there is an "image" showing how the selectbox was designed. Outmost there is a container that contains two other containers. One is for the selected item and the down button and the other contains the options. The lower one is hidden when the size of the select box isn't set (or set to 1) and is displayed when clicking the down button. If you set the size of the textbox to a larger value than 1 a standard list box is created so you'll only have the lower container.

There are basically two ways of building the menu. First you can write all the containers by yourself or you can use the generator function (much easier but not as flexible).

Generating the code

To create the custom selectbox, you need to include some javascript files and a css file.:

<link type="text/css" rel="STYLESHEET" href="classic.css">
<!-- Include either fade.js or swipe.js. This defines the animation used to display the drop-down -->
<script type="text/javascript" src="fade.js"></script>
<script src="swipe.js" type="text/javascript"></script<
<script type="text/javascript" src="select.js"></script>
<script type="text/javascript" src="writeSelect.js"></script>

After including the scripts, you create an array of options as follows:

optionArray = new Array();
optionArray[0] = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;");
optionArray[1] = new Option("Item <b>2</b>", "value 2");
optionArray[2] = new Option("Item 3", "value 3, "color: red", "selected"");
optionArray[3] = new Option("Item 4", "value 4");
optionArray[4] = new Option("Item 5", "value 5");

Last, you need to display the select box. The select box is displayed in the page whereever the writeSelectBox function is defined:

writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10");

The first argument is the the list with options (this is the only required argument). The second is a unique id to identify the selectbox (this should be added for better performance). The third is the size. Setting this to more than one results in a list box rather than a drop-down combo box. The fourth is the action to do on change. This action is a JavaScript expression that is evaluated. You can also add an optional fifth argument that is a string with any number of CSS values (like this "position: absolute; top: 100px;") to apply to the list element. However, it is recommended that you apply a style to the select element's ID using a global stylesheet.

The above script result in the following selectbox.

Below is the same select box with size set to 3

More Examples

Download Select.zip

We made a zip file to make it easy to get all the required files. Click here to download.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.