Added an Object Model Reference with an interactive test page.

This sample creates a selectbox that works almost identically to the <SELECT> block. The special about this is that it can contain HTML and you can set all attributes you like.

This was designed to be backward compatible with old browsers. If you dont have IE it writes out an ordinary select box.


To the left there is an "image" showing how the selectbox was designed. Outmost there is a container that contains the two other containers. One is for the selected 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 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).

Follow this linkto view one with where all the containers are included. this also show some alternativ layout

Generating the code

First of all (as allways) you need to include some javascript files and a css file.:

<link type="text/css" rel="STYLESHEET" href="classic.css">
<script type="text/javascript" src="fade.js"></script>
<script type="text/javascript" src="select.js"></script>
<script type="text/javascript" src="writeSelect.js"></script>

After this you create an array of options like this:

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");

Then you initiate the select box. It will be display at the current position so this shoul be done in the body:

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 needed argument). The second is the id the of the selectbox (this should be added for better performanc). The third is the size. Setting this to more than one results in another type of select box and The forth is the action to do on change. You can also add a fifth argument that si a string with CSS values (like this "position: absolute; top: 100px;"). I really recomend that you change in the css file instead because this allow you to edit all elements

The above script result in the following selectbox.

Below is the same select box with size set to 3

Author: Erik Arvidsson