Страна, Штат, Город, Javascript выпадающий список

Question

Я использую выпадающий список, содержащийся в 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> 

Я получил код для работы в порядке, но только с небольшим содержанием. Когда я загружаю все страны, штаты & регионы, & города & городов в countryStateCity.js файл на моем компьютере заканчивается память.

Файл "countryStateCity.js" огромен. Если бы я перечислил все страны и все штаты & регионы и города & города стран, начиная с "A" & "B" все работает ОК, но если я добавлю города & города страны, начиная с "C" система не работает.

Мне нужно разбить исходный файл, возможно, на 1 для каждой страны, подобной этому;

src="country/Canada.js" 
src="country/Mexico.js" 
src="country/United States.js" 

Я хочу Javascript, чтобы найти имя файла, как страна/Canada.js, а не найти имя в пределах всего мирового файла.

Может ли кто-нибудь предоставить мне исправленную кодировку «Javascript»?

Answer 1

OK. Это просто сделать. У меня нет доступа к файлу вашей страны, поэтому я не знаю, как он ограничен или разбит, массивы IE или JSON. Таким образом, мой код - это всего лишь ваш пюре, и это не сработает. Но это показывает, как вы можете решить свою проблему с быстрым конечным результатом для пользователя.

Хитрость - это просто загрузить данные, которые необходимы, когда вам это нужно. Обычно это делается с помощью API, вы называете это через ajax, сообщите ему, что вы хотите, и бум отправит его обратно, чтобы ваш пользовательский интерфейс мог его показать.

В этом случае у нас нет сервера, поэтому мы будем делать это путем динамической загрузки скриптов в dom. В этом случае данные страны заполняются штатами и городами. По запросу запрашивается один файл в каждой стране.

Было бы лучше загрузить данные состояния, а затем города за состояние и так далее. А также потенциально рассмотрения, если данные должны быть удалены из Дома, если память вопрос:

// 
 
// 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(){ 
 
\t _COUNRTY = document.getElementById('country'), 
 
\t file = ["country/",_COUNTRY,".js"].join; 
 
\t addScript(file, setStates); \t 
 
}; 
 
// 
 
// 
 
// 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(); 
 
});