# Dropdown List

### Overview

The Dropdown List Web Control creates a Dropdown List where an App user can select a value from a List.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-0011c3a282ab6fa1514293e6e8d1652770f0a261%2Fdropdown-list-web-control-v1715-0.gif?alt=media)

### Control Properties

#### Placeholder Text

The text that appears in the Dropdown List before the App user selects a value.

#### Data Binding

**Value**

The variable where the Input of the dropdown is stored. &#x20;

#### Type of List

**Simple List:** Selecting this value allows the simple creation of options for the Dropdown List.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-46f5ba89708f51b1de166b3ea734d163ca6e8c7a%2Fdropdown-list-web-control-v1715-1.png?alt=media)

Under the hood, selecting Simple List creates a List of Strings as the options of the Dropdown List.

**Custom Expression:** Selecting this value gives full control over all the properties of the Dropdown List\


![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-2ff04b5687d934a897cb232d7e501e0321ffaab2%2Fdropdown-list-web-control-v1715-2.png?alt=media)

**Note:** In this example, selecting Custom Expression after creating a Simple List will expose the List of strings created in the Simple List.

#### Custom Expression properties:

**Display Text:**

The data which the Dropdown List refers to for the user-selectable options. This field supports the Expression Editor so that Objects may be provided within Lists.

**Data:**

The data which the Dropdown List refers to for the user-selectable options. This field supports the Expression Editor so that Objects and other data types may be provided within Lists.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-717e034e8602d0350301b53938c66eb9b8a836c5%2Fdropdown-list-web-control-v1715-3.png?alt=media)

**Value Text:**

The value that will be stored/saved when the App user selects an item in the Dropdown List. If left blank, the Value Text will be the `item`.

**Selected:**

Accepts an Expression that evaluates whether or not the selected item is indicated to the App user. An Expression that evaluates to TRUE will make the Dropdown List display the selected Display Text, whereas an Expression that evaluates to FALSE will **not** display what has been selected to the App user.

**Example:**

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-3709b6c5d270679cc805a283bf3efd5580aeff5c%2Fdropdown-list-web-control-v1715-4.png?alt=media)

In this example, when the app user selects "Porsche Cayman S" from the Dropdown List, the value of "Porsche" is stored in the variable of `dropdown_list`. Because the Expression in **Selected** is checking whether the stored value is equal to the "item.make" property, it evaluates to TRUE and this selection is indicated to the app user.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-e2c6de6bd8fa479703bb9c1d7d58a53fc9259a50%2Fdropdown-list-web-control-v1715-5.png?alt=media)

### Styling

Dropdowns can be styled with these controls. For more information, see [Common Style Properties of Web Controls](web-controls-overview/common-style-properties-of-web-controls).

### Examples

#### Example 1: Simple List of options

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-4d338fa5deb9f31d47fe0998c42f5dee6652107d%2Fdropdown-list-web-control-v1715-6.png?alt=media) &#x20;

#### Example 2: Working with Custom Expressions to use and display data

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-84b6aec8a985594e200ef308f3672a7d4cfb62cf%2Fdropdown-list-web-control-v1715-7.png?alt=media) &#x20;

#### Example 3: Working with Custom Expressions to use and display objects

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-b4465eaf0d4f2a08f98bbc81cf70c5f8580d529e%2Fdropdown-list-web-control-v1715-8.png?alt=media)

In this example, if the app user selects "Porsche", the value that will be stored will be the entire object as there is no Value Text entered.

```javascript
{ "make": "Porsche", "model": "Cayman S" }
```

#### Example 4: Working with Custom Expressions to use and display different data

![organizing info](https://a01-support.airkit.com/dropdown-list-web-control/mceclip16.png)

In this example, if the app user selects "Porsche Cayman S", the value that will be stored will be the entire object as there is no Value Text entered.

```javascript
{ "make": "Porsche", "model": "Cayman S" }
```

#### Example 5: Working with Custom Expressions to use and display different data

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-c56c319ffd8fb21c81d2919677a17c405ea08396%2Fdropdown-list-web-control-v1715-9.png?alt=media)

In this example, if the app user selects "Porsche Cayman S", the value that will be stored will be "Porsche" as each Item's make value as the Value Text is set to `item.make`.

```javascript
"Porsche"
```
