> For the complete documentation index, see [llms.txt](https://docs.zerowork.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zerowork.io/using-zerowork/using-building-blocks/select-web-dropdown.md).

# Select Web Dropdown

<figure><img src="https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FPmZYHsQ9LKx5Js2vzo4g%2Fselect_web_dropdown_block.png?alt=media&amp;token=b39fcc5f-7324-4185-b247-4ebecf7cc2d3" alt="" width="375"><figcaption></figcaption></figure>

The **Select Web Dropdown** block picks an option in a dropdown list by its visible text, such as a country, a quantity, or a category.

{% hint style="warning" %}
This block only works on **native dropdowns**, the kind a page builds with the `<select>` tag. Many menus that *look* like dropdowns are really a `div`, `span`, or `button` styled to look like one, and those won't work here; use [Click Web Element](https://docs.zerowork.io/using-zerowork/using-building-blocks/click-web-element) for those. [See Native vs Custom Dropdown](#native-vs-custom-dropdown) to check which kind you're working with.
{% endhint %}

## How To Use It

<figure><img src="https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2F0sGwRzYbZyryQwNbXlkD%2Fselect_web_dropdown_settings.png?alt=media&amp;token=0a85a917-5860-4a05-b2d6-fab64f296986" alt=""><figcaption></figcaption></figure>

### Dropdown option

The dropdown option to choose, entered as the **visible text** shown in the list, not the hidden value behind it. It must match the option's full text exactly, including capitalization. This field accepts [dynamic inputs](https://docs.zerowork.io/using-zerowork/using-building-blocks/dynamic-inputs).

### Web element selector

The CSS or XPath selector for the dropdown. It must point to a `<select>` element. See [Using Selectors](https://docs.zerowork.io/using-zerowork/using-selectors). If it matches more than one dropdown, the first match is used.

#### Timeout

How long to wait for the dropdown to appear, and then for the option to be available in it, before giving up, in seconds. The default is **3 seconds**.

#### Block-level Delays

**Min sec** and **Max sec** represent a pause after the option is selected, before the next block runs. The wait is randomized between the two values, and setting both to the same number makes it fixed. This block defaults to **1 second**.

{% hint style="info" %}
See the [Delay](https://docs.zerowork.io/using-zerowork/using-building-blocks/delay) block for how these two fields behave, including decimals, references, and what happens when a field is left empty. See [Delay Times between the Building Blocks](https://docs.zerowork.io/using-zerowork/using-building-blocks/building-block-options/delay-times-between-the-building-blocks) for how block-level delays fit into a TaskBot's run.
{% endhint %}

## Native vs Custom Dropdown

The two kinds can look identical on the page, so check before you build. Right-click the dropdown in the web page and choose **Inspect**. The browser opens a panel showing the page's code, with the line for the dropdown highlighted. The word right after the opening `<` on that line is the element's **tag**, and the tag is what tells the two kinds apart.

### Native Dropdowns

<figure><img src="https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2FN4oIKFZ9BwCXZ69JHtsS%2Fselect_web_dropdown_native.gif?alt=media&amp;token=f03f3de9-cf69-4e40-ac5d-0ab72e3abed5" alt=""><figcaption></figcaption></figure>

The tag is `select`, so this block works. Each `option` line inside it is one choice in the list. The text between the tags (`Germany`) is what goes in **Dropdown option**; the `value` beside it (`de`) is the hidden value, which this block doesn't use.

### Custom Dropdowns

<figure><img src="https://3220183989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg9LcR8XM7TGOzOCDGsCS%2Fuploads%2Fo6JubOmNPvS4J06Isvxu%2Fselect_web_dropdown_custom.gif?alt=media&amp;token=a5e0c956-5f3c-4fa0-a806-0c15e2a37385" alt=""><figcaption></figcaption></figure>

The tag is `button`, and the choices beneath it are plain `div` lines; there's no `select` or `option` anywhere. This block won't work here, even though the dropdown looks the same on the page. Other custom dropdowns can be built from a `div` or a `span` instead; anything other than `select` counts. Use one [Click Web Element](https://docs.zerowork.io/using-zerowork/using-building-blocks/click-web-element) block to open the menu and a second one to click the option.

## Things To Know

* **Pick the option from your data.** Drive the choice from a variable or a table column, for example selecting a different country for each row in a [Start Repeat](https://docs.zerowork.io/using-zerowork/using-building-blocks/start-repeat) loop.
* **Dropdowns that depend on each other work in sequence.** When choosing from one dropdown subsequently fills in another (for example, a country, then its states), use one block per dropdown, in order. The page reacts to each choice just as it would to a person's, and the block waits for its option to show up. If the second list loads slowly, raise its **Timeout**.
* **A custom menu can hide a real `<select>` underneath.** Some sites keep a native `<select>` in the page but hide it and show their own styled menu on top. Inspecting the page can turn up that hidden `<select>`, but this block can't use it; the dropdown has to be visible and enabled. Treat it as a custom menu and use [Click Web Element](https://docs.zerowork.io/using-zerowork/using-building-blocks/click-web-element) instead.
* **One option per block, even on a multi-select list.** On a list that lets a person choose several options at once, this block leaves only its own option selected and clears the rest, so you can't build up several choices with several blocks.

## Block Behavior

**When no option is provided** (the field is empty, or resolves to an empty value) the block fails with an error and stops the run, before it looks for the dropdown.

**When the dropdown can't be found within the timeout** the block fails with a selector error and stops the run.

**When the selector matches more than one element** the block uses the first match.

**When the selector doesn't point to a `<select>`** the block fails right away with an error saying it doesn't target a select field, and stops the run. A selector that points to a `<label>` attached to a `<select>` counts as pointing to that `<select>`.

**When the dropdown is found** the block waits, up to the timeout, for it to be visible and enabled and for an option with matching text to exist. The timeout applies to this wait separately from the wait to find the dropdown. The match is against the option's visible text only, is case-sensitive, and must be the whole text; spaces at the start or end of **Dropdown option** are ignored.

**When a matching option exists** the block selects it, notifies the page of the change the way a person's choice would, and logs the option it selected and the selector it used. If several options share the same text, the first one is selected. An option that's greyed out in the list is still selected. On a multi-select list, any other selected options are cleared.

**When no matching option appears in time, or the dropdown stays hidden or disabled** the block fails with an error saying the option isn't part of the dropdown's options, and stops the run.
