/* * 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("web/xml/temp.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; // 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 check =document.getElementById("cboCountry").value; if(check=='Others') { document.getElementById("cboState").disabled=true; document.getElementById("cboCity").disabled=true; } else { document.getElementById("cboState").disabled=false; document.getElementById("cboCity").disabled=false; } 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); } } // Populate State/Province list on Country change function fillCityList() { // Get State/Province element ID var check =document.getElementById("cboState").value; if(check=='Others') { document.getElementById("cboCity").disabled=true; } else { document.getElementById("cboCity").disabled=false; } var CityList = document.getElementById("cboCity") // Clear any current values in select box // If JavaScript isn't working existing text will remain for (var x = CityList.options.length-1; x >-1; x--) { CityList.options[x] = null; } // Get currently selected ID from country element ID var countryListSelected = document.getElementById("cboCountry").selectedIndex; // Get currently selected ID from country element ID var StateListSelected = document.getElementById("cboState").selectedIndex; // Get number of states for current selected Country (populates Array) var temp1=xmlDoc.getElementsByTagName("country")[countryListSelected].getAttribute("name"); var numberCities=xmlDoc.getElementsByTagName("country")[countryListSelected].getElementsByTagName("state")[StateListSelected].getElementsByTagName("city").length; // Loop through States/Province Array and populate State/Province selection for current Country for (var i=0; i<=numberCities-1; i++) { var currentCity = xmlDoc.getElementsByTagName("country")[countryListSelected].getElementsByTagName("state")[StateListSelected].getElementsByTagName("city")[i].firstChild.nodeValue; fillList(CityList,currentCity,currentCity); } }