Overview
The Chained Select Field allows you to create a series of interconnected dropdown menus, where each selection filters the options available in subsequent dropdowns. This field is ideal for hierarchical data, such as Country → State → City, or Category → Subcategory → Product selections.
Key Features
- Multi-Level Dropdowns: Create unlimited levels of dependent dropdowns.
- CSV Data Source: Upload CSV files or link to remote URLs for dynamic data.
- Automatic Filtering: Child dropdowns update instantly based on parent selections.
- Two Layout Options: Vertical or horizontal dropdown arrangement.
- Save & Resume Support: Selections are preserved when saving drafts.
Common Use Cases
- Location Selection: Country → State/Province → City → Zip Code for shipping or registration forms.
- Vehicle Selection: Year → Make → Model → Trim for automotive forms.
- Product Configuration: Category → Subcategory → Product → Variant for e-commerce stores.
- Organization Hierarchy: Department → Division → Team → Employee for internal directories.
How to Add a Chained Select Field
Step 1: Add the Field to Your Form
- Go to HT Form → Forms in the WordPress admin.
- Edit an existing form or create a new one.
- In the Form Builder, find Chained Select in the elements panel.
- Drag and drop the field onto your form.
Step 2: Configure Basic Settings
Admin Label
- Purpose: Internal field identifier.
- Example: “Location Selector”, “Vehicle Picker”.
Label
- Purpose: Text displayed above the dropdown.
- Example: “Select Your Location”, “Choose a Vehicle”.
Placeholder
- Purpose: Text shown in unselected dropdowns.
- Default: “Select…”
- Example: “Choose an option”.
Data Source Configuration
Option 1: File Upload
- Click Upload CSV.
- Select your CSV file (ensure it’s within the size limit).
- The file will be parsed immediately, and you’ll see the detected columns.
Option 2: Remote URL
- Enter the URL of your CSV file.
- Click Fetch Data to load it.
- Use Refresh to update the data if the file changes.
CSV Format Requirements
Basic Structure
Your CSV file must have:
- Header Row: Column names are used as dropdown labels.
- Data Rows: Values for each dropdown level.
Example: Location Data
Country,State,City
USA,California,Los Angeles
USA,California,San Francisco
Canada,Ontario,Toronto
Canada,Quebec,Montreal
This creates a 3-level dropdown: Country → State → City.
Layout Configuration
Layout Options
| Layout | Description | Best For |
|---|---|---|
| Vertical | Dropdowns stacked vertically. | Mobile forms. |
| Horizontal | Dropdowns displayed side by side. | Desktop forms. |
Field Size Options
| Size | Appearance |
|---|---|
| Small | Compact dropdowns |
| Medium | Standard size |
| Large | Prominent dropdowns |
How Filtering Works
Level 1 (First Dropdown)
Displays all unique values from the first CSV column.
Level 2 (Second Dropdown)
Filters options based on the selected value from the first dropdown.
Subsequent Levels
Each level filters based on all previous selections, displaying only the relevant options.
Complete Configuration Examples
Example 1: Location Selector
Scenario: Shipping address form with country/state/city selection.
Configuration:
- Admin Label: Shipping Location
- Label: Select Your Location
- Data Source: File Upload (locations.csv)
CSV:
Country,State/Province,City
USA,California,Los Angeles
USA,New York,New York City
Canada,Ontario,Toronto
Example 2: Product Selector
Scenario: Product selection with categories, subcategories, and products.
Configuration:
- Admin Label: Product Finder
- Label: Find Your Product
- Data Source: Remote URL (https://example.com/products.csv)
CSV:
Category,Subcategory,Product
Electronics,Phones, iPhone 13
Electronics,Phones, Galaxy S21
Clothing,T-Shirts, Basic Tee
Clothing,Jeans, Skinny Fit Jeans
Viewing Submissions
Chained Select data is displayed as a sequence of selected values:
- Example: “USA → California → Los Angeles”.
- Exporting Entries: Data is stored as a JSON array, e.g.,
["USA", "California", "Los Angeles"].
Advanced Tips
Dynamic Data Updates
For frequently updated data, use Remote URL as the data source. This allows you to refresh the data without re-uploading the CSV.
Conditional Logic Integration
You can show or hide other fields based on Chained Select choices. For example, display shipping options if the user selects a specific country.
Optimizing Large Datasets
For large CSV files (over 1000 rows), consider breaking data into smaller chunks or using Remote URL to fetch data dynamically.
Troubleshooting
CSV Not Parsing Correctly
- Solution: Ensure the file is UTF-8 encoded and columns are consistent across all rows.
Remote URL Not Loading
- Solution: Verify the URL is publicly accessible and that the file is in CSV format.
Dropdowns Not Filtering
- Solution: Ensure your CSV follows the correct structure and that there are no empty cells.