Conditional Fields depending on checkboxes

Question

I'm currently trying the following (simplified objects):

I have a bunch of "objects", which are cities. Each city has a relating country (even though I'm not sure how to implement this relation, yet), so for example I have the following cities:

Stuttgart - Germany
Berlin - Germany
Dresden - Germany
Paris - France
Marseille - France
Lyon - France
New York - USA
Chicago - USA
LA - USA
Miami - USA
Peking - China
Shanghai - China
Hongkong - China

I think you get what I mean.

Additionally, I have some checkboxes, including the country, so in the case of the list provided, I would 4 checkboxes, one for Germany, one for France, one of USA and one for China.

When ticking one of this checkboxes, the relating cities should appear underneath, when ticking two of the checkboxes, the cities of both checked countries should appear, and so on.

Actually, I have no idea how to get this started. In a normal web application, I would just create a database table with 3 columns (ID, City, Country) and then in my frontend just react on the checkbox.change, send AJAX to a php file, which gets the requested objects from database (something like select * from tbl_cities where country=germany) and just echo them.

Is something similar possible in Wordpress? Are there plugins for things like that, or how could I get this started?

Answer 1

I've written something very similar with Contact Form 7. Instead of a Country -> City relation, the relation is Car make -> Car model -> car year.

https://bdwm.be/how-to-create-dynamically-populated-cascading-dropdown-lists-for-contact-form-7/

You could start from a CSV file that looks like this:

Country, City
Germany, Berling
Germany, Stuttgart
China, Peking
...

Then create a contact form like this (with Contact Form 7 and Conditional Fields for Contact Form 7)

<label>Select your country: [select country include_blank]</label>
[group city-group]
  <label>Select your city: [select city inlcude_blank]</label>
[/group]

You could add this condition to only show the city when a country is selected

show [city-group] if [country] not equals ""

Then in your functions.php you will need to write a function that that listens for an AJAX call and returns the possible values for the drop down lists to the client.

On the client side you will need initiate the AJAX call whenever a value in the drop down list changes, and based on the response update the values in the drop down lists.

You can find a detailed tutorial here: https://bdwm.be/how-to-create-dynamically-populated-cascading-dropdown-lists-for-contact-form-7/