I want to offer the user the possibility to add the country/language for websites they would submit to a fairly simple website directory. I have a folder with flags from http://www.famfamfam.com/lab/icons/flags/ . The flag images are named according to the ISO 3166-1 alpha-2 country codes, meaning that I could make a PHP script that would be able to retrieve images and the name of the country retrieved from the image name (not the full name, but it wouldn't be necessary).

Just to make things clearer, I couldn't find a proper combo-box jQuery plugin for my needs (that would act exactly like the native but with an icon before the text) and don't really have the time to develop one on my own. Considering the number of images, I also wouldn't just display them all with a radio box near them. Also, having a classic drop-down list would be a nightmare for me as I would have to assign the short country name manually to each entry, or do it once for every country. Offering the user a dropdown list with the short country names but no flag near them would also be unfriendly and confusing.

The idea is that every website featured in the directory would have the country flag icon near it. I have the images named properly but I don't know how to let the user choose the right image for their website. Any idees?

Thank you all in advance!


Temporary solution is this file: http://www.andrewpatton.com/countrylist.csv It contains a list of countries including various other info, like the short country name, the same name that's used for the flag images. I can take that information and have a classic like this:

<select name="countries">
     <option value="ro">Romania</option>
     <option value="ie">Ireland</option>
     <!-- and so on -->

Still, If anybody has a better idea...

1 Answer 1


I would advise you to reserve a div/box for the country flag and set its visibility as hidden, thereby reserving its space. Offer the user a regular dropdown list and let the flag fade-in as they select the country (assuming they are filling out a regular form). The idea behind is that the user should never be offered the option of setting the flag as it is simply too confusing and overwhelming at first, both for that user, other users and yourself.

The parsing of the text for the correct image can be done server side with a simple script.

The good thing is that with time, users will get used to seeing the flags and welcome them, possibly beginning to distinguish between the flags. There really isn't much to write in the way of scripts though, save for minor ones. That is my view.

  • You need the country/language name to sort by, but there's nothing wrong with showing the flag next to them. Visual icons help with recognition. Someone will recognize the US or UK flag much quicker than they can scan a column of text for the country names. It defeats the purpose of having the flags if you're not going to use them to assist selection. Nov 24, 2010 at 3:58
  • Lese, precisely. Also, there is a jquery livesearch function now to assist in selecting/typing the country name. Have a look at the final code (ejohn.org/apps/livesearch/jquery.livesearch.js) or the page itself here (ejohn.org/blog/jquery-livesearch). Many thanks to John Nunemaker for the original quicksilver port. Thanks Lese for the suggestion as well. Nov 25, 2010 at 5:30
  • You guys got it right already. I just wanna suggest here is a very complete country flag set I ever found: gimmerank.com/en/KB/Config/Geotargeting The picture host on CDN as well e.g. gimmeicon.com/32x/us.png It also has size 16x 32x 128x 256x
    – Eric Yin
    Jan 10, 2012 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.