I've tried to implement all the methods and properties that a normal SELECT object has. There are a few small differances and left outs...


Methods


add

Description

Adds an option to the select box.

Before you can add an option to a selectbox, you must create it first by using the createElement method. (this is the standard method)

Syntax

object.add(element [,index])

The element is an element you just created using createElement

index is where in the select box to insert the new option. If no index is given the option is placed at the end of the select box

Applies to

DHTML Select


remove

Description

Removes an option from the select box.

Syntax

object.remove(index)

index is the number or the string indicating which option to remove. If this is a string it represent the NAME or ID of the option to remove.

Applies to

DHTML Select


item

Description

Retrieves an option from the given select box.

Syntax

object.item(index)

index is the number or the string indicating which option to retrieve. If this is a string it represent the NAME or ID of the option to remove.

Return value

This returns an option, which is actually a DIV.

Remarks

This is actually not needed but is used for compability. You can just use indexing of the options collection.

This differs from the original item method. The original method takes two arguments, the second is used if more than one option has the same name. If two or more divs have the same name their names ar invalid. Thus this has no need for two arguments.

Applies to

DHTML Select


Collections


options

Description

Returns the collection/array of options.

Syntax

object.options([index])

index is optional and if provided this returns an option element. Otherwise it returns the collection of options. If this is a string it represent the NAME or ID of the option.

Applies to

DHTML Select


Properties


selectedIndex

Description

Retrieves an integer specifying the index of the selected option in a select object.

Syntax

object.selectedIndex

This returns the index of the selected option (ranging from 0).

Remarks

The real select box has this value to read write but here it is currently read only.

Applies to

DHTML Select


selected

Description

Shows if an option is selected.

Syntax

object.selected

This returns true if the object (that is an option) is selected.

Remarks

If not selected it returns undefined which is treated as falls in tests.

In the real option object this property has read write access but here it is currently read only.

Applies to

DHTML Option


createElement

Description

This method is the standard method to createElements. This can only create OPTIONS and IMG elements. I'll jsut show you a little example how to use it and then insert it inside a select box.

el = document.createElement("OPTION");
el.text = "Test <b>X</b>"; // Note that normal select boxes will not 
                           // parse this and the text will be shown exactly
                           // like it is entered	
el.style.cssText = "background: red"; // This works on normal select boxes as well.
                                      // The DHTML select checks for the cssText and
                                      // applies it to the option. Note that other
                                      // style declarations won't be applied
select1.add(el,2); // select1 could be an ordinary select box as well

Below is a link that opens a new window with a select box and an inupt line where you can write code, no error checking though :-)

Try This!

Author: Erik Arvidsson