Country Selection Drop Down Box

When you are creating a form, you often want the person filling out the form to provide an address. Given the international nature of the internet, one thing that you need to capture as part of any address is the Country. The countries in the world are relatively static (barring wars and successions) so a drop down list where the person can select their country rather than typing it is one option to consider. Unfortunately there are quite a lot of countries in the world and finding a relatively complete list may take some time let alone the time required to convert that list into a drop down selection box.

Never fear because I am about to save you the trouble of doing any of that. To allow this selection list to work in as many browsers as possible the list itself is now available to copy as HTML rather than generating it from JavaScript. It still uses a small piece of JavaScript though to simplify the task of selecting the default country that the list uses when the page first loads. The JavaScript removes the blank entry at the top of the list and selects whichever option you want to use as the default. Anyone without JavaScript will simply get the list defaulting to the blank entry at the top.

HTML

Simply attach the above HTML into your form where you want the Country selection to appear.

The JavaScript that we are going to use with the above country select simply removes the blank entry at the top of the list and sets whichever of the other entries in the list as the default. This saves you having to hunt through the above code to find the country that you want to and to edit that HTML to set the default and also means that you can easily amend the JavaScript to set a different default based on information that you already know rather than having the select always use the same default.

The last version I wrote of this generated the entire HTML setting one of half a dozen specific countries as the default. Since we are now setting the default using JavaScript I am going to use the above HTML to provide you with a way to set whichever country you like as the default. Simply select a country from the below select list and the JavaScript to go with the above HTML will be generated for you and inserted into the textarea below.

JavaScript

Simply attach the JavaScript to the bottom of the page that has the country select in it.

Note that you may change the JavaScript as much as you like, the generated code is simply an example of how you can set the default for this select list from JavaScript. If you have more than one country select in the same page you may also change the id and name attributes at the top of the HTML (along with making the corresponding changes to the JavaScript).

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate