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?

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?

• plugins
• php
• ajax
• javascript
• conditional-content

Share Improve this question asked Mar 31, 2018 at 10:01 namelessnameless 101 6

• is the list of cities something dynamic that you want to be able to edit in the backend ? or it's relativly fixed and you can manually edit the files if there is a modification to do ? – mmm Commented Mar 31, 2018 at 10:30
• @mmm changes might happen, but not so often, so if its just 2 or 3 files to edit, it would be okay to edit it manually, but if there is a way to have the list of cities dynimaclly I would prefer this solution – nameless Commented Mar 31, 2018 at 10:31
• 1 there is always a way to do lots of thing but it takes more time to develop. to manage cities in the backend, you can use a custom post type for the cities and store countries in a taxonomie. – mmm Commented Mar 31, 2018 at 10:34
• @mmm how does this with a taxonomie work? Never worked so deep in wordpress itself, only with plugins so far... – nameless Commented Mar 31, 2018 at 10:45
• @mmm or what would be the alternative way to do it with manual changes? – nameless Commented Mar 31, 2018 at 11:01

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

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/