/* * Author: Michael John Grove * Version: 0.1 (02 March 2008) * Description: Javascript Country DropDown selection with full Province/State selection * Fast XHTML compliant Country/State selection list from XML file * License: Creative Commons Attribution-Share Alike 2.5 South Africa License (http://creativecommons.org/licenses/by-sa/2.5/za/) */ // 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("advcountry_state.xml"); // Populate selected dropdown list with data from XML file // () // 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: 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; // childNodes // Loop through Country name Array and populate country select for (var i=0; i<=numberOfCountries-1; i++) { var currentCountry = countryNames[i].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")[i].firstChild.nodeValue; fillList(stateList,currentState,currentState); } }