Working with Lists in the Page Designer

There are two types of lists you can add to a DHTML page: a List element and a Select element. The List element is a scrolling list. The Select element creates a combo box much like the one you add to Visual Basic forms.

Adding items to HTML lists works very differently from the process of adding items to a list box or combo box on a Visual Basic form. You cannot use the List property or the AddItem method to add items to an HTML element. Instead, there are two ways you can populate your list:

• To populate the list at design time, you can edit the HTML in an external editor and enter the appropriate values.
  
  
• To populate the list at run time, you can use a method of the Document object in Dynamic HTML.

When you first add a list to an HTML page in the designer, the HTML for the list element looks like this:

<select name="List1" id="List1" value="List1">
     <option value="List">
</select>

<select name="Select1" id="Select1" value="Select1">
     <option selected value="Select">Select
</select>

Note   If you edit your HTML using FrontPage, you may see closing </option> tags in the code shown above. Either usage is acceptable.

To populate a list element

1. Click the Launch Editor button from the designer toolbar.
   
   
2. In your HTML or text editor, view the source code for the list element.
   
   
3. Copy the <option value="list"> line and paste it between the opening and closing <select> tags once for each list item you want to add. For example, if you are adding four list items, there would be four instances of <option value="list"> in your HTML code.
   
   
4. Type the list item you want to add after each <option> tags. Your resulting HTML will look something like this:

   <select name="List1" id="List1" value="List1">
   <option value="List">First list item
   <option value="List">Second list item
   <option value="List">Third list item
   </select>
   

5. Save your changes and return to the designer. When prompted to refresh the changed file, click OK.

To populate a select element

1. Click the Launch Editor button from the designer toolbar.
   
   
2. In your HTML or text editor, view the source HTML code for the list element.
   
   
3. Copy the <option selected value="Select"> line and paste it between the opening and closing <select> tags once for each list item you want to add. For example, if you are adding four list items, there would be four instances of <option selected value="Select">.
   
   
4. Edit the tags you have copied so that only one line says "option selected value="Select". The other lines should only say "option value="Select". For example, if you have added three lines, your HTML would now look like this:

   <select name="Select1" id="Select1" value="Select1">
   <option selected value="Select">Select
   <option value="Select">Select
   <option value="Select">Select
   </select>
   

5. Type the list item you want to add after each <option> tags, replacing the word "Select." Your resulting HTML will look something like this:

   <select name="Select1" id="Select1" value="Select1">
   <option selected value="Select">Default list item
   <option value="Select">Second list item
   <option value="Select">Third list item
   </select>
   

6. Save your changes and return to the designer. When prompted to refresh the changed file, click OK.

Populating a List or Select Element at Run Time

You can also populate list elements at run time. For example, suppose you have an HTML page with a list, a text field, and a button. You want the end user to be able to enter a value in the text field, then press a button to make that value appear in the list. The following picture shows the HTML page:

HTML Page with List Elements

The button code can use a method of the DHTML Document object called CreateElement to add list items to the list. The code would be as follows:

Private Function Button1_onclick() As Boolean
   Dim e as HTMLOptionElement
   Set e = Document.createElement("OPTION")
   e.Text=TextField1.Value
   e.Value="ListItemValue"
   List1.Options.Add e
End Function

Note   The CreateElement method can be used only for Select elements, such as the list and select elements in the toolbox, and for IMG elements. You cannot use it to create a new element of any other type.