Dynamically load combobox using jQuery

Webpages easily contain a lot of duplicate content. This however, can hurt your Google pagerank. Duplicate content can also slow down your pages.
Currently I’m building a new site with some friends. This site has a sign-up form with all the usual fields like name, email, country and so on. Now, to make sure the new user enters a correct country, they are presented with a complete list of countries in the world. This list was, until a few days ago, loaded into all the pages on the site = bad for performance!

This is how I solved it:

First off, the signup form in hidden until the user decides to sign-up – clicking a button. When the form is presented the countries select-box is almost empty. It only contains one option “Please select a country”. When the user clicks the select box, all the countries are dynamically loaded through AJAX and inserted into the select box.

Below is how the countries are loaded using jQuery
[sourcecode language=”javascript”]
$(document).ready(function()
{
$(‘#country’).click(function()
{
// only load the list if not already loaded
if($(‘#country option’).size() > 1 )
return;
url = ‘http://www.zoon.dk/countries.json’;
$.getJSON(url, function(j)
{
var options = ”;
for (var i = 0; i < j.length; i++)
{
options += ‘<option value="’ + j[i][0] + ‘">’ + j[i][1] + ‘</option>’;
}
$("#country").html(options);
})
});
[/sourcecode]

As you can see, the countries list is in JSON format. Usually people store this kind of information in a database… but why? How often do we see a new country in the world? Why do you want the extra database overhead? I can’t come up with a single good reason… but perhaps you can?

You could choose to store the list in pure HTML, and just load it with
[sourcecode language=”javascript”]
$("#country").html(j);
[/sourcecode]

That would be even faster 🙂

Anyways, nothing beats a demo…
[ad name=”Google Adsense-1″]

Find a demo using this technique right here, and please leave a comment if you know of a better or faster way 🙂