How to create dependent dropdowns in WordPress forms

Decide which field controls the next one. For example, Country controls State, and State controls City. Give every option a stable value, such as a term ID or database ID, rather than relying on the displayed label.

Choose JavaScript for a short, fixed list. If the child options come from posts, terms, products, users or another large data set, use an AJAX request so you do not load every option into the page at once. This is the usual distinction made in WordPress support discussions about cascading dropdowns.

Add one select field for the parent and another for the child in your form builder. Give them clear field names or IDs, such as country and state. Add a first option such as “Select a country” and leave the child field empty or disabled until a parent value is chosen.

Make the child field required only when it has valid options. When the parent changes, clear the old child value before adding the new options. Otherwise, a previously selected child can remain visible or be submitted even though it no longer belongs to the selected parent.

For a small, rarely changing list, store the relationship in a JavaScript object and listen for the parent select’s change event. Empty the child select, add a placeholder, then loop through the matching child options and append them to the field.

Disable the child field while no parent is selected and enable it after options are added. This method is simple and avoids a server request, but every data change requires editing the script. It also becomes slow and difficult to maintain when the list contains hundreds or thousands of records.

For database-backed options, send the selected parent ID to wp-admin/admin-ajax.php. WordPress AJAX requests need an action value; register the matching wp_ajax_{$action} handler for logged-in users and wp_ajax_nopriv_{$action} as well if visitors can use the form.

Enqueue the JavaScript with wp_enqueue_script(), pass the AJAX URL and a nonce with wp_localize_script(), and verify the request with check_ajax_referer(). Sanitize the parent value, query only its children, return the options as JSON, and rebuild the child select in the browser.

Do not trust the browser’s dropdown choices. On submission, verify that the selected child really belongs to the selected parent. A user can bypass JavaScript or send a forged request directly to the form endpoint.

Also check that the dynamically added option has the field name expected by your form plugin. A common failure is that the option appears on screen but is missing from the saved entry because the plugin only accepts registered field values. Some plugins require their own API or documented field-update method instead of direct DOM changes.

If you need several levels, editable relationships or non-technical administration, use a form extension that supports hierarchical or chained selects instead of maintaining custom JavaScript and AJAX handlers.

JetFormBuilder Hierarchical Select is a suitable option when your form uses category-to-subcategory choices. It adds multi-level selections, conditional behaviour and dynamic option population within JetFormBuilder forms, reducing the amount of custom code you need to maintain.