I am sure you have figured this out by now, or have found an alternative solution, but here is the fix for your three-level drop down; for you or anyone else looking:
Javascript,
function fillStateList() edited and function fillCityList() added.
Code:
/*
* Author: Michael John Grove
* Version: 0.1 (02 March 2008)
* Description: Javascript Country DropDown selection with full Province/State selection
* License: Creative Commons Attribution-Share Alike 2.5 South Africa License
*/
// Load XML file before html loads
var xmlDoc;
// For IE based browsers (tested under IE6 and IE7):
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
// For Mozilla based browsers (Netsacpe/Firefox):
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("","doc",null);
}
// Turn off asynchronus download.
// Load the entire file before trying to do anything with it.
xmlDoc.async=false;
//load the country/state XML file
xmlDoc.load("3level.xml");
// Populate selected dropdown list with data from XML file
// (<option value="County/StateName">County/StateName</option>)
// Function used for both Country Fill and State Fill
function fillList(selectbox,text,value)
{
var optionValue = document.createElement("option");
optionValue.text = text;
optionValue.value = value;
selectbox.options.add(optionValue);
}
// Populate Country list on page load
// Requires: <body onload="fillCountryList();"> on HTML page
function fillCountryList ()
{
// Get country element ID
var countryList = document.getElementById("cboCountry");
// Clear any current values in select box
// If JavaScript isn't working existing text will remain
for (var x = countryList.options.length-1; x >-1; x--)
{
countryList.options[x] = null;
}
// Fill Country name Array from XML file
var countryNames = xmlDoc.getElementsByTagName("country");
// Gets total Number of countries in XML file
var numberOfCountries = countryNames.length;
// Loop through Country name Array and populate country select
for (var i=0; i<=numberOfCountries-1; i++)
{
var currentCountry = countryNames.getAttribute("name");
fillList(countryList,currentCountry,currentCountry);
}
}
// Populate State/Province list on Country change
function fillStateList()
{
// Get State/Province element ID
var stateList = document.getElementById("cboState")
// Clear any current values in select box
// If JavaScript isn't working existing text will remain
for (var x = stateList.options.length-1; x >-1; x--)
{
stateList.options[x] = null;
}
// Get currently selected ID from country element ID
var countryListSelected = document.getElementById("cboCountry").selectedIndex;
// Get number of states for current selected Country (populates Array)
var numberStates = xmlDoc.getElementsByTagName("country")[countryListSelected].getElementsByTagName("state").length;
// Loop through States/Province Array and populate State/Province selection for current Country
for (var i=0; i<=numberStates-1; i++)
{
var currentState = xmlDoc.getElementsByTagName("country")[countryListSelected].getElementsByTagName("state").getAttribute("name");
fillList(stateList,currentState,currentState);
}
}
function fillCityList()
{
var CityList = document.getElementById("cboCity")
for (var x = CityList.options.length-1; x >-1; x--)
{
CityList.options[x] = null;
}
var countryListSelected = document.getElementById("cboCountry").selectedIndex;
var StateListSelected = document.getElementById("cboState").selectedIndex;
var numberCities = xmlDoc.getElementsByTagName("country")[countryListSelected].getElementsByTagName("state")[StateListSelected].getElementsByTagName("city").length;
for (var i=0; i<=numberCities-1; i++)
{
var currentCity = xmlDoc.getElementsByTagName("country")[countryListSelected].getElementsByTagName("state")[StateListSelected].getElementsByTagName("city").firstChild.nodeValue;
fillList(CityList,currentCity,currentCity);
}
}
HTML
HTML Code:
<body onload="fillCountryList();">
<h1>Country slection - with State/Province select</h1>
<p>
<select id="cboCountry" onchange="fillStateList();">
<option value="">Select a Country</option>
</select>
</p>
<p>
<select id="cboState" onchange="fillCityList();">
<option value="">Select a State</option>
</select>
</p>
<p>
<select id="cboCity">
<option value="">Select a City</option>
</select>
</p>
</body>
XML
Code:
<?xml version="1.0" encoding="utf-8"?>
<countries author="Michael John Grove" title="Country, State-Province, City selections"
date="2008-Feb-05">
<country name="USA">
<state name="NY">
<city>New York</city>
<city>New Jersey</city>
</state>
<state name="California">
<city>Sanfransico</city>
<city>Hollywood</city>
</state>
</country>
<country name="South Africa">
<state name="Gauteng">
<city>Johannesburg</city>
<city>Pretoria</city>
</state>
<state name="Kwazulu Natal">
<city>Durban</city>
<city>Pietermaritsburg</city>
</state>
</country>
</countries>
Hope this helps, feel free to ask for assistance if you need it, and please PM me if you find any bugs, I slapped this version together rather quickly.
Kind Regards
Michael
The author of the original country script you used 
Edit: fixed small bug in script that displayed the wrong cities.
Linear Mode
