new Option()、.options.add(new Option(value,text))、.options.length=0、document.getElementById(“selectId”).selectedIndex、select、onload、onunload、onchange、this.selectedIndex
<!DOCTYPE html>
<html lang="zh" id="htmlId">
<head id="headId">
<title>BOM基础</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<style>
</style>
</head>
<script type="text/javascript">
// 省市联动相关数据
var arr = ["中国","美国","日本"];
arr["中国"] = ["北京","上海","钓鱼岛"] ;
arr["北京"] = ["海淀","朝阳","昌平","丰台"] ;
arr["上海"] = ["浦东","金山","崇明","浦西"] ;
arr["钓鱼岛"] = ["钓鱼岛东","钓鱼岛南","钓鱼岛西","钓鱼岛北"] ;
arr["美国"] = ["纽约","华盛顿","旧金山"] ;
arr["纽约"] = ["纽约1","纽约2","纽约3","纽约4"] ;
arr["华盛顿"] = ["华盛顿1","华盛顿2","华盛顿3","华盛顿4"] ;
arr["旧金山"] = ["旧金山1","旧金山2","旧金山3","旧金山4"] ;
arr["日本"] = ["东京","大阪","神户"] ;
arr["东京"] = ["东京1","东京2","东京3","东京4"] ;
arr["大阪"] = ["大阪1","大阪2","大阪3","大阪4"] ;
arr["神户"] = ["神户1","神户2","神户3","神户4"] ;
// 省市联动相关代码。
function initCountryProvinceArea(){
alert("Onload initCountryProvinceArea");
// 填充"country"select,第二个参数"country"为对应select的id。
fillCountryProvinceAreaDate(arr,"country");
fillCountryProvinceAreaDate(arr[arr[0]],"province");
fillCountryProvinceAreaDate(arr[arr[arr[0]][0]],"area");
}
function fillCountryProvinceAreaDate(theArr,theid){
for(var i=0; i<theArr.length; i++)
{
var theOption = new Option();
theOption.text = theArr[i];
theOption.value = theArr[i];
// 也可以使用下面更快捷的初始化方法。
// var theOption = new Option(value,text);
document.getElementById(theid).options.add(theOption);
}
}
// “country”select发生改变即onchange事件时调用的方法。参数index为选中的项的index。
function changeCountry(index){
// “国家”改编后,清空省市以及地区select。
document.getElementById("province").options.length=0;
document.getElementById("area").options.length=0;
// 根据选中的“国家”重新填充省市和地区。
fillCountryProvinceAreaDate(arr[arr[index]],"province");
fillCountryProvinceAreaDate(arr[arr[arr[index]][0]],"area");
}
// “province”select发生变化后调用的方法。
function changeProvince(index){
// 省市改变以后清空地区select
document.getElementById("area").options.length=0;
// 根据选中的“国家”、“省市”重新选中“地区”。
var selectCountryIndex = document.getElementById("country").selectedIndex;
fillCountryProvinceAreaDate(arr[arr[arr[selectCountryIndex]][index]],"area");
}
function onunloadFuncOfBody(){
alert("onunload事件");
}
</script>
<body οnlοad="initCountryProvinceArea() " onunload = "onunloadFuncOfBody()" id="bodyId">
<form>
国家:<select id="country" οnchange="changeCountry(this.selectedIndex)"></select>
省市:<select id="province" οnchange="changeProvince(this.selectedIndex)"></select>
地区:<select id="area"></select>
</form>
</body>
</html>