KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: How to preselect an item in an HTML drop-down list (Web Serving)
PRODUCT: 4D | VERSION: 6.7 | PLATFORM: Mac & Win
Published On: September 14, 2001
Your current browser may not allow you to download the asset. We recommend Mozilla Firefox or Google Chrome.
Log In

The following technique is a simple way to preselect a drop-down list's item in your HTML page. It is useful especially when you want the user to see a specific item in the list at the time the HTML page is loaded.

1. Suppose your drop-down list is created with a fixed number of items:

<SELECT NAME="SelectableList">
<OPTION VALUE="Item 1">Item 1</OPTION>
<OPTION VALUE="Item 2">Item 2</OPTION>
<OPTION VALUE="Item 3">Item 3</OPTION>
</SELECT>

Here is a way to preselect an item in the HTML drop-down list:

- Modify your HTML drop-down list to the following.

<SELECT NAME="SelectableList">
<OPTION VALUE="Item 1" <!--4DVAR Item1Sel-->>Item 1</OPTION>
<OPTION VALUE="Item 2" <!--4DVAR Item2Sel-->>Item 2</OPTION>
<OPTION VALUE="Item 3" <!--4DVAR Item3Sel-->>Item 3</OPTION>
</SELECT>

- In the method where the HTML page will be sent, modify your code as follows:

C_TEXT($1)
C_TEXT(Item1Sel;Item2Sel;Item3Sel)
Item1Sel:=""
Item2Sel:=""
Item3Sel:=""

` This is the part where you decide which
` Item will be selected. In this example,
` Item 2 will be seleted.
Item2Sel:="selected"

SEND HTML FILE("Page.html")

2. If the drop-down list is going to be created dynamically (refer to 9/7/2001 Tech Tip - Generating items dynamically for an HTML drop-down list), you can try the following method.

- Modify your HTML drop-down list to the following.

<SELECT NAME="SelectableList">
<!--4DLOOP ArrayOfItems-->
<!--4DIF (isSelected=ArrayOfItems{ArrayOfItems})-->
<OPTION VALUE="<!--4DVAR ArrayOfItems{ArrayOfItems}-->" selected><!--4DVAR ArrayOfItems{ArrayOfItems}--></OPTION>
<!--4DELSE-->
<OPTION VALUE="<!--4DVAR ArrayOfItems{ArrayOfItems}-->"><!--4DVAR ArrayOfItems{ArrayOfItems}--></OPTION>
<!--4DENDIF-->
<!--4DENDLOOP-->
</SELECT>

- In the method where the HTML page will be sent, modify your code as follows:

C_TEXT($1;isSelected)
ARRAY TEXT(ArrayOfItems;3)
For ($i;1;Size of array(ArrayOfItems))
ArrayOfItems{$i}:="Item "+String($i)

` This is the part where you decide which
` Item will be selected. In this example,
` Item 3 will be seleted.
If ($i=3)
isSelected:=ArrayOfItems{$i}
End if
End for
SEND HTML FILE("DynamicPage.html")