我有一个旧的旧JavaScript代码，应允许用户先选择一个国家/地区，然后激活该国家/地区选项的县列表。在加载时，国家/地区的选项显示ANY，并且县标签的选项应该说选择首先选择国家但不选择。仅当用户首先选择国家/地区然后返回以选择任何国家时，才会显示选择县第一个条件。
我对JavaScript并不擅长，不提jQuery。如何纠正现有的js甚至用更好的精益代码实现我想要的东西？
提前感谢您的帮助。
<div>
<label id="country">Country of birth:</label>
<select name="country" tabindex="7" onchange="populateCountiesDropdown(this[this.selectedIndex].value);">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<script type="text/javascript">
setSelect(document.main.country, '');
</script>
</div>
<div>
<label id="county">County of birth:</label>
<select name="county" tabindex="8">
</select>
<script type="text/javascript">
populateCountiesDropdown(document.main.country.value);
setSelect(document.main.county, "");
</script>
</div>
<script type="text/javascript">
var counties_dropdown = new Array();
counties_dropdown["ENG"] = new Array(" |All counties in country" ,"BDF|Bedfordshire","BRK|Berkshire","BKM|Buckinghamshire","CAM|Cambridgeshire","CHI|Channel Islands","CHS|Cheshire","CON|Cornwall","CUL|Cumberland","DBY|Derbyshire","DEV|Devon","DOR|Dorset","DUR|Durham","ESS|Essex","GLS|Gloucestershire","HAM|Hampshire","HEF|Herefordshire","HRT|Hertfordshire","HUN|Huntingdonshire","IOM|Isle of Man","KEN|Kent","LAN|Lancashire","LEI|Leicestershire","LIN|Lincolnshire","LND|London","MDX|Middlesex","NFK|Norfolk","NTH|Northamptonshire","NBL|Northumberland","NTT|Nottinghamshire","OXF|Oxfordshire","RUT|Rutlandshire","SAL|Shropshire","SOM|Somerset","STS|Staffordshire","SFK|Suffolk","SRY|Surrey","SSX|Sussex","WAR|Warwickshire","WES|Westmorland","WIL|Wiltshire","WOR|Worcestershire","YKS|Yorkshire" );
counties_dropdown["IRL"] = new Array(" |All counties in country" ,"ANT|Antrim","ARM|Armagh","CAR|Carlow","CAV|Cavan","CLA|Clare","COR|Cork","LDY|Derry (Londonderry)","DON|Donegal","DOW|Down","DUB|Dublin","FER|Fermanagh","GAL|Galway","KER|Kerry","KID|Kildare","KIK|Kilkenny","OFF|Kings (Offaly)","LET|Leitrim","LIM|Limerick","LOG|Longford","LOU|Louth","MAY|Mayo","MEA|Meath","MOG|Monaghan","NAI|Nairnshire","LEX|Queens (Laois)","ROS|Roscommon","SLI|Sligo","TIP|Tipperary","TYR|Tyrone","WAT|Waterford","WEM|Westmeath","WEX|Wexford","WIC|Wicklow" );
counties_dropdown["SCT"] = new Array(" |All counties in country" ,"ABD|Aberdeenshire","ARL|Argyllshire","AYR|Ayrshire","BAN|Banffshire","BEW|Berwickshire","BUT|Buteshire","CAI|Caithness","CLK|Clackmannanshire","DFS|Dumfriesshire","DNB|Dunbartonshire","FIF|Fife","ANS|Forfarshire (Angus)","ELN|Haddingtonshire (East Lothian)","INV|Invernessshire","KCD|Kincardineshire","KRS|Kinrossshire","KKD|Kirkcudbrightshire","LKS|Lanarkshire","WLN|Linlithgowshire (West Lothian)","MLN|Midlothian","MOR|Morayshire","PEE|Peeblesshire","PER|Perthshire","RFW|Renfrewshire","ROC|Ross and Cromarty","ROX|Roxburghshire","SEL|Selkirkshire","SHI|Shetland Islands","STI|Stirlingshire","SUT|Sutherland","WIG|Wigtownshire" );
counties_dropdown["WLS"] = new Array(" |All counties in country" ,"AGY|Anglesey","BRE|Brecknockshire","CAE|Caernarvonshire","CGN|Cardiganshire","CMN|Carmarthenshire","DEN|Denbighshire","FLN|Flintshire","GLA|Glamorganshire","MER|Merionethshire","MON|Monmouthshire","MGY|Montgomeryshire","PEM|Pembrokeshire","RAD|Radnorshire" );
function populateCountiesDropdown(formObj, country) {
formObj.county.options.length = 0;
if(country == "") {
formObj.county.options[0] = new Option('Choose a country first', '');
return;
}
for(i = 0; i < counties_dropdown[country].length; i++) {
var option = new Option(counties_dropdown[country][i].substr(counties_dropdown[country][i].indexOf('|')+1),
counties_dropdown[country][i].substr(0,counties_dropdown[country][i].indexOf('|')));
formObj.county.options[i] = option;
}
formObj.county.options[0].value = '';
}
</script>
答案 0 :(得分：1)
有很多不同的方法可以解决这个问题，但一种简单的方法是在HTML中硬编码初始状态，然后在需要时用Javascript覆盖它。
<select name="county" tabindex="8">
<option>Choose a country first</option>
</select>
答案 1 :(得分：1)
正如您在评论中所建议的，使用jQuery肯定会使这段代码更容易阅读。但是，在我看来，您可以进行的最佳优化是在您的县数据结构中：将其设置为一个地图，而不是一个数据，其中项目由管道字符分隔，然后您必须拆分。那就是：
var counties = {
'ENGLAND': {
'BDF': 'Bedfordshire',
'BRK': 'Berkshire',
...
},
'IRELAND': {
'ANT': 'Antrim',
'ARM': 'Armagh',
...
},
'SCOTLAND': {
'ABD': 'Aberdeenshire',
'ARL': 'Argyllshire',
...
},
'WALES': {
'AGY': 'Anglesey',
'BRE': 'Brecknockshire',
...
}
};
您现在可以使用国家/地区选择值中的密钥来驱动此项并填充县下拉列表。要查看国家/地区的更改，您可以使用jQuery的.change()函数。
我建议您阅读jQuery API文档并进行试验。让SO用户回答您的问题，您将无法取得进展！但是，这就是我的工作解决方案：http://jsfiddle.net/pfYEb/
答案 2 :(得分：1)
在这里，您还添加了一些评论。经过测试的工作。
<script type="text/javascript">
var counties_dropdown = new Array();
counties_dropdown["ENG"] = new Array(" |All counties in country", "BDF|Bedfordshire", "BRK|Berkshire", "BKM|Buckinghamshire", "CAM|Cambridgeshire", "CHI|Channel Islands", "CHS|Cheshire", "CON|Cornwall", "CUL|Cumberland", "DBY|Derbyshire", "DEV|Devon", "DOR|Dorset", "DUR|Durham", "ESS|Essex", "GLS|Gloucestershire", "HAM|Hampshire", "HEF|Herefordshire", "HRT|Hertfordshire", "HUN|Huntingdonshire", "IOM|Isle of Man", "KEN|Kent", "LAN|Lancashire", "LEI|Leicestershire", "LIN|Lincolnshire", "LND|London", "MDX|Middlesex", "NFK|Norfolk", "NTH|Northamptonshire", "NBL|Northumberland", "NTT|Nottinghamshire", "OXF|Oxfordshire", "RUT|Rutlandshire", "SAL|Shropshire", "SOM|Somerset", "STS|Staffordshire", "SFK|Suffolk", "SRY|Surrey", "SSX|Sussex", "WAR|Warwickshire", "WES|Westmorland", "WIL|Wiltshire", "WOR|Worcestershire", "YKS|Yorkshire");
counties_dropdown["IRL"] = new Array(" |All counties in country", "ANT|Antrim", "ARM|Armagh", "CAR|Carlow", "CAV|Cavan", "CLA|Clare", "COR|Cork", "LDY|Derry (Londonderry)", "DON|Donegal", "DOW|Down", "DUB|Dublin", "FER|Fermanagh", "GAL|Galway", "KER|Kerry", "KID|Kildare", "KIK|Kilkenny", "OFF|Kings (Offaly)", "LET|Leitrim", "LIM|Limerick", "LOG|Longford", "LOU|Louth", "MAY|Mayo", "MEA|Meath", "MOG|Monaghan", "NAI|Nairnshire", "LEX|Queens (Laois)", "ROS|Roscommon", "SLI|Sligo", "TIP|Tipperary", "TYR|Tyrone", "WAT|Waterford", "WEM|Westmeath", "WEX|Wexford", "WIC|Wicklow");
counties_dropdown["SCT"] = new Array(" |All counties in country", "ABD|Aberdeenshire", "ARL|Argyllshire", "AYR|Ayrshire", "BAN|Banffshire", "BEW|Berwickshire", "BUT|Buteshire", "CAI|Caithness", "CLK|Clackmannanshire", "DFS|Dumfriesshire", "DNB|Dunbartonshire", "FIF|Fife", "ANS|Forfarshire (Angus)", "ELN|Haddingtonshire (East Lothian)", "INV|Invernessshire", "KCD|Kincardineshire", "KRS|Kinrossshire", "KKD|Kirkcudbrightshire", "LKS|Lanarkshire", "WLN|Linlithgowshire (West Lothian)", "MLN|Midlothian", "MOR|Morayshire", "PEE|Peeblesshire", "PER|Perthshire", "RFW|Renfrewshire", "ROC|Ross and Cromarty", "ROX|Roxburghshire", "SEL|Selkirkshire", "SHI|Shetland Islands", "STI|Stirlingshire", "SUT|Sutherland", "WIG|Wigtownshire");
counties_dropdown["WLS"] = new Array(" |All counties in country", "AGY|Anglesey", "BRE|Brecknockshire", "CAE|Caernarvonshire", "CGN|Cardiganshire", "CMN|Carmarthenshire", "DEN|Denbighshire", "FLN|Flintshire", "GLA|Glamorganshire", "MER|Merionethshire", "MON|Monmouthshire", "MGY|Montgomeryshire", "PEM|Pembrokeshire", "RAD|Radnorshire");
function populateCountiesDropdown(country) {
// get the html element
var select = document.getElementById("county");
// remove all options from select
select.options.length = 0;
if (country == "") {
select.options[0] = new Option('Choose a country first', '');
return;
}
for (i = 0; i < counties_dropdown[country].length; i++) {
// split the element of county array
// for example after split county array will contain
// county[0] = 'BDF',
// county[1] = 'Bedfordshire',
var county = counties_dropdown[country][i].split('|');
// add a new option to the select by inserting it to the index of length
// note that length is zero based, so current length would be the index that you need to
// add the new option.
select.options[select.options.length] = new Option(county[1], county[0]);
}
}
</script>
<div>
<label for="country">Country of birth:</label>
<select id="country" name="country" tabindex="7" onchange="populateCountiesDropdown(this[this.selectedIndex].value);">
<option value="" selected="selected">Any</option>
<option value="ENG">England</option>
<option value="IRL">Ireland</option>
<option value="SCT">Scotland</option>
<option value="WLS">Wales</option>
</select>
</div>
<div>
<label for="county">County of birth:</label>
<select id="county">
<option value=""> Choose a country first</option>
</select>
</div>