Ytukyg

I'm using the dropdown list contained in http://www.javascriptsource.com/forms/country-state-city-drop-down-list.html

// State lists

var states = new Array();

states['Canada'] = new Array('Alberta', 'British Columbia', 'Ontario');

states['Mexico'] = new Array('Baja California', 'Chihuahua', 'Jalisco');

states['United States'] = new Array('California', 'Florida', 'New York');

// City lists

var cities = new Array();

cities['Canada'] = new Array();

cities['Canada']['Alberta'] = new Array('Edmonton', 'Calgary');

cities['Canada']['British Columbia'] = new Array('Victoria', 'Vancouver');

cities['Canada']['Ontario'] = new Array('Toronto', 'Hamilton');

cities['Mexico'] = new Array();

cities['Mexico']['Baja California'] = new Array('Tijauna', 'Mexicali');

cities['Mexico']['Chihuahua'] = new Array('Ciudad Juárez', 'Chihuahua');

cities['Mexico']['Jalisco'] = new Array('Guadalajara', 'Chapala');

cities['United States'] = new Array();

cities['United States']['California'] = new Array('Los Angeles', 'San Francisco');

cities['United States']['Florida'] = new Array('Miami', 'Orlando');

cities['United States']['New York'] = new Array('Buffalo', 'new York');



function setStates() {

    cntrySel = document.getElementById('country');

    stateList = states[cntrySel.value];

    changeSelect('state', stateList, stateList);

    setCities();

}



function setCities() {

    cntrySel = document.getElementById('country');

    stateSel = document.getElementById('state');

    cityList = cities[cntrySel.value][stateSel.value];

    changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {

    selectField = document.getElementById(fieldID);

    selectField.options.length = 0;

    for (i = 0; i < newOptions.length; i++) {

        selectField.options[selectField.length] = newOption(newOptions[i], newValues[i]);

    }

}



function addLoadEvent(func) {

    var oldonload = window.onload;

    if (typeof window.onload != 'function') {

        window.onload = func;

    } else {

        window.onload = function() {

            if (oldonload) {

                oldonload();

            }

            func();

        }

    }

}

addLoadEvent(function() {

    setStates();

});

Head < script type = "text/javascript"

src = "countryStateCity.js" > << / script > Body < fieldset style = "width: 230px;" > <legend><strong>Make your selection</strong></legend> < p > <form name="test" method="POST" action="processingpage.php">

<table>

<tr>

<td style="text-align: left;">Country:</td>

<td style="text-align: left;">

<select name="country" id="country" onchange="setStates();">

<option value="Canada">Canada</option>

<option value="Mexico">Mexico</option>

<option value="United States">United States</option>

</select>

</td>

</tr><tr>

<td style="text-align: left;">State:</td>

<td style="text-align: left;">

<select name="state" id="state" onchange="setCities();">

<option value="">Please select a Country</option>

</select>

</td>

</tr><tr>

<td style="text-align: left;">City:</td>

<td style="text-align: left;">

<select name="city"  id="city">

<option value="">Please select a Country</option>

</select>

</td>

</tr>

</table>

</form> < /fieldset>

I have got the code to work OK but only with small content. When I load all countries, states & regions, & cities & towns into countryStateCity.js file my computer runs out of memory.

The "countryStateCity.js" file is huge. If I list all the countries and all the states & regions and the cities & towns of the countries starting with "A" & "B" everything works OK, but if I add the cities & towns of the countries starting with "C" the system fails.

I need to break up the source file into maybe 1 for each country similar to this;

src="country/Canada.js"

src="country/Mexico.js"

src="country/United States.js"

I want Javascript to find a file name like country/Canada.js, rather than find a name within the whole world file.

Can somebody provide me with amended "Javascript" coding?

OK. This is simple to do. I don't have access to your country file so I don't know how it is scoped or broken up, IE arrays or JSON. So my code is just a mash of yours and it will not work. But it shows how you can solve your problem with a fast end result for the user experience.

The trick is just to load the data that is needed when you need it. Usually this is done with an API, you call it via ajax tell it what you want and boom it sends it back so your UI can show it.

In this scenario we don't have a server so we will do it by dynamically loading scripts into the dom. In this case country data filled with states and City's. One file per country when requested.

It would be better to load state data then cities per state and so on. As well as potentially considering if data should be removed from the Dom if memory is an issue:

//

// Some globals to store what the user selects.

//

VAR _COUNTY, _STATE, _CITY;



//

// This will append scripts to the body so that you dont need to load all the 

// scripts in one go, this is the trick.

//

function addScript( src,callback) {

  var s = document.createElement( 'script' );

  s.setAttribute( 'src', src );

  s.onload=callback;

  document.body.appendChild( s );

}

//

// Get all the states based on country

// add the correct file to the dom

// ie: country/Canada.js

// these files would be better scoped geodata.country geodata.state.

//

// IMPORTANT CHANGE YOUR HTML SELECT HANDLER TO FIRE HERE.

// <select name="country" id="country" onchange="getStates();">

//

function getStates(){

	_COUNRTY = document.getElementById('country'),

	file = ["country/",_COUNTRY,".js"].join;

	addScript(file, setStates);	

};

//

// 

// Called when the script loads

//

function setStates() {

//

// Here is where we would do

// geodata.states for now I'm using your declaration of state.

//

var stateList = states;

changeSelect('state', stateList, stateList);

// Not sure why you are doing this they need to select a state first?

setCities();

}

//

// Called when they select a state, 

// I would replicate the state code and load all the cities per state.

// I would disable the city drop down until the states are loaded.

//

function setCities() {

_STATE = document.getElementById('state');

cityList = cities[_COUNTRY][_STATE];

changeSelect('city', cityList, cityList);

}



function changeSelect(fieldID, newOptions, newValues) {

selectField = document.getElementById(fieldID);

selectField.options.length = 0;

for (i=0; i<newOptions.length; i++) {

selectField.options[selectField.length]=newOption(newOptions[i],newValues[i]);

}

}



function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}



addLoadEvent(function() {

setStates();

});