国家,州,市的Javascript下拉列表
我使用包含在下拉列表中http://www.javascriptsource.com/forms/country-state-city-drop-down-list.html国家,州,市的Javascript下拉列表
// 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>
我已经得到了代码工作正常,但只有小的内容。当我加载所有国家时,州&地区,&城市&城镇into 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”编码吗?
好的。这很容易做到。我无法访问您的国家/地区文件,因此我不知道它是如何被限制或打破的,IE数组或JSON。所以我的代码只是你的一个混搭,它不会工作。但它显示了如何以用户体验的快速最终结果解决您的问题。
诀窍就是加载需要的时候需要的数据。通常这是通过一个API来完成的,你可以通过ajax来调用它,告诉它你想要什么,然后将它发送回来,这样你的UI就可以显示出来。
在这种情况下,我们没有服务器,所以我们将通过动态地将脚本加载到dom中来实现。在这种情况下,国家数据充满了州和城市的数据。每个国家需要时提供一个文件。
最好是加载状态数据,然后加载每个州的城市等等。除了潜在的考虑,如果数据应从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();
});
在这个问题中提供的代码没有详细解决问题。我的回答是代码的破解,以显示如何使用动态脚本加载可以解决问题。但是我的答案留下了很多问题,因为我们无法访问数据文件,也无法访问数据文件,也无法查看其范围和组成。需要编写大量代码才能使其成为可靠的解决方案。正如其他人所说,这不是一个免费的代码写作服务。 – MartinWebb
谢谢Martin,我发现了这个问题。问题出在国家档案中。那里有一些角色不应该在那里,它会抛出整个系统。他们花了很多时间找到它们。 – user225359
我赢了答案吗?我的解决方案回答了如何在用户选择时即时加载数据的问题?这是个问题,我认为我的解决方案解决了这个问题,因为我没有这些数据,所以这不是一个可行的解决方案。 – MartinWebb
我就从服务器通过AJAX加载数据。 –
StackOverlfow不是免费的编写代码或数据结构服务 – charlietfl
开发人员信任堆栈溢出来帮助解决编码问题并使用堆栈溢出作业找到工作机会。我们致力于让互联网变得更加美好,我们的产品旨在丰富开发人员的职业生涯并使其成长。 – user225359