Page cover image

Auto-Populate Select Fields

Auto-populate the options in your <select> field based on a category you specify in the data attribute and add an optional custom placeholder.

How Does It Work?

Apply the Geo Select data attribute to a <select> element, using a value corresponding to the variable name for one of the available categories in the table at the bottom.

How To Implement

Attribute Name
Attribute Value
Which Page Element?

data-geo-select*

category-name

<select>

data-gs-placeholder

Your Custom Placeholder

Any element with the Geo Select data attribute.

The category name is case-sensitive and must match the respective 'Category Variable'.

The default placeholder option for the <select> element will be 'Choose an Option'. You can override this by setting the placeholder data attribute noted above.

The Geo Form data attribute does not need to be added to the <form> element for the Geo Select data attribute to function.

*β€Žβ€β€β€Ž β€ŽAttribute names with a red asterisk are required; all others listed in the table are optional.

Developer Tip: With a little JavaScript, you can dynamically update the options in one <select> based on what was chosen in another. For example, if someone chooses 'Canada', add Canadian provinces and territories. View the code snippet.

Available Categories

Category Name
Category Variable

African Countries

af-countries

All Countries

all-countries

Antarctican Countries

an-countries

Asian Countries

as-countries

Australian States and Territories

au-states-and-territories

Canadian Provinces and Territories

ca-provinces-and-territories

European Countries

eu-countries

North American Countries

na-countries

Oceania Countries

oc-countries

South American Countries

sa-countries

United Kingdom Countries

uk-countries

American States

us-states

Examples

<!-- This <select> Will Be Populated with North American Countries -->
<select data-geo-select="na-countries" data-gs-placeholder="Choose a Country">
</select>

<!-- This <select> Will Be Populated with American States -->
<select data-geo-select="us-states" data-gs-placeholder="Choose a State">
</select>

<!-- This <select> Will Be Populated with Australian States and Territories -->
<select data-geo-select="au-states-and-territories" data-gs-placeholder="Choose a State or Territory">
</select>

Last updated

Was this helpful?