A Drupal Dropdown List of Countries, States, Cities

A-Drupal-Dropdown-List-of-Countries-States-Cities

We had a question from a member this week. He was collecting information from users and wanted to collect addresses:

“I need to have a user select a state in a list. My next requirement is to populate a new list with all the counties for the selected state.”

It’s easy to imagine many more people wanting to do something similar, so in this tutorial we’ll explain how it’s done.

This tutorial could be used to show Continents and then Countries, Countries and the States, States and then Cities or any similar combination you need. We’re going to use the Conditional Fields module.

Installation

Install the Conditional Fields module: https://drupal.org/project/conditional_fields

Yes, it is marked as a dev version for Drupal 7, but it worked for us without any problems.

Add the fields

Add your data fields as you would normally.

In this example, our first field would be a list of the US states. We’re going to add these as a List (text) field.

media_1379091240827.png

We enter a list of all 50 states into the field:

media_1379091343156.png

Now we repeat the process for the counties in each state. Start alphabetically with Alabama Counties:

media_1379091420401.png

And enter all a list of all the counties.

media_1379091458618.png

You will need to repeat this 49 more times, creating a field for each state.

Managing Dependencies

The Conditional Fields module adds a new tab called “Manage Dependencies” to the top of the fields area. Click that tab.

media_1379091576338.png

The Manage Dependencies tab is organized into Dependents and Dependees.

In this example, the Dependents are the counties and the Dependees are the States. Our first setup will be this:

  • Dependent: Alabama Counties
  • Dependees: US States

Click Add dependency.

media_1379091619850.png

The key setting for the field is “Insert Value from Widget”. Make sure you choose the State that will trigger the list of counties. In this example, we choose Alabama.

media_1379091651885.png

You will need to repeat this 49 more times, creating a dependency for each state.

Test the dependencies

Go to create a new item for your content type and see whether the dependencies are working.

In our example, only the states field will show:

media_1379091719975.png

However, if we select the Alabama option, then the Alabama Counties field will appear.

media_1379091796680.png

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ipwa
ipwa
11 years ago

It would be cool to wrap it up as a feature and offer it as a download

steve
steve
11 years ago
Reply to  ipwa

Yes that definitely would be a neat idea for some situations:
World countries / cities

World countries / regions

US states / counties

Canadian provinces / cities etc.

ipwa
ipwa
11 years ago
Reply to  steve

I was thinking more along the lines of making a feature with the features module out of this. Conditional fields does have features integration. That way for example you could name your feature usa_field or something and have it available as a download here so people could just enable it and have that field available straight away. I’m just saying since you guys did the footwork you might as well wrap it up in a feature that way everyone can use.

Maxim
Maxim
11 years ago

You can also take a look at [url=https://drupal.org/project/ddf]https://drupal.org/project/ddf[/url] module.

steve
steve
11 years ago
Reply to  Maxim

Thanks Maxim

dench0
dench0
11 years ago

WTF??? 49 times ?!!

taxonomy + [url=https://drupal.org/project/hierarchical_select]https://drupal.org/project/…[/url]

Ændrew Rininsland
Ændrew Rininsland
11 years ago
Reply to  dench0

Quite agreed. Creating 51 fields for this type of functionality is simply insane. It’d be less effort to write an entirely new field that references an API somewhere than it would be to create and populate all those fields — even if it involves learning PHP The Drupal Way from scratch along the way.
But, fortunately, the Hierarchical Select module linked to is a good deal less work than both those options. Great suggestion.

steve
steve
11 years ago

Thanks Dencho, yes doing everything through Taxonomy could be a viable alternative.
Ændrew, sadly telling people to just learn PHP is not a viable alternative.

Ændrew Rininsland
Ændrew Rininsland
11 years ago
Reply to  steve

You’re mistaking my politeness for naïveté. I’m not telling people to go learn PHP; I’m saying that a user could probably learn PHP to a serviceable level in the time it would take to simply populate all the fields this tutorial requires.
But seriously, doesn’t Location.module or something have this all pre-built already anyway?

subekar
subekar
11 years ago

But views integration is not available for this module.I Want Conditional exposed filters.

Lucas Oliveira
Lucas Oliveira
10 years ago

The [url=http://jquery.country]jquery.country[/url] plugin may helps, is a plugin for country/state/city dropdown without any use of database and server side coding. [url=http://oohm-software.github.io/jquery.country/]http://oohm-software.github…[/url]

11
0
Would love your thoughts, please comment.x
()
x