# Drop Down

A drop-down control renders to a standard HTML \<select /> tag containing \<option /> tags. You can populate the drop-down from a data source or define a static list.

***

{% embed url="<https://www.youtube.com/embed/V5kqmTXXzLY?autoplay=1&rel=0&vq=1080>" %}
*Add a Drop Down*
{% endembed %}

***

### Properties

1. **Options**

   Specify a list of options to display in the control. It can be generated from a static list or from data. When populating the Options from a [*Connector*](https://docs.stadium.software/connectors) or file, use the Field Mapping Editor found in the Property Grid (seen circled in red below) to assign the *Text* and the *Value* of the items. ![](https://3514041584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxH8JA8xG3I22tiZG5H6%2Fuploads%2Fgit-blob-2f132a2f0db7d340b55f3cf7b360f4631825c3b9%2Flist-options.png?alt=media)
2. **Hint**

   Some placeholder text that will show when the drop down is empty. This value is not saved if no other value is entered.
3. **Read-Only**

   Set to True if you want the control to display as read-only (value can't be changed) on the page.
4. **Selected Value**

   This value will be shown in the drop down when the field loads.
5. **Validations**

   Some validations that can be applied to the drop-down.
6. **Visible**

   Set to False if you don't want this control to render on the page and be visible to the user.

***

### Assigning data to a DropDown

Example:

To display a DropDown list containing option values retrieved by a SQL query:

1. Use an appropriate [Event](https://docs.stadium.software/features/events), e.g. *Load* (page) or *Click* (button) to which a [*SetValue* ](https://docs.stadium.software/actions/set-value)action can be added.
2. Add a [SetValue](https://docs.stadium.software/actions/set-value) action that populates the DropDown *options* with each returned value.

Data:

DropDowns expect a `List` of objects containing a `text` and a `value` property

```json
[
    {"text":"Monday","value":"1"},
    {"text":"Tuesday","value":"2"},
    {"text":"Wednesday","value":"3"},
    {"text":"Thursday","value":"4"},
    {"text":"Friday","value":"5"}
]
```

The [Field Mapping ](https://docs.stadium.software/features/mappings)option in the [SetValue](https://docs.stadium.software/actions/set-value) action allows for the mapping of object properties other than text & value to these properties

***

### Retrieving data from a DropDown

Properties that can contain data:

* Options (Value)

Use an [action](https://docs.stadium.software/actions) to capture the values from the control. Go here for more details on how to collect data from controls.

***

### Events

1. **Change**

   An event that triggers when another option in the dropdown is selected.

   Event Input Parameters:

   1. PreviousOption\
      The *Text* and *Value* of the option that was selected before selecting the option.
   2. SelectedOption\
      The *Text* and *Value* of the newly selected option.