JavaScript--05 DOM基础 12.1

来源：互联网发布：成都生活家装饰知乎编辑：程序博客网时间：2024/04/30 13:14

new Option()、.options.add(new Option(value,text))、.options.length=0、document.getElementById(“selectId”).selectedIndex、select、onload、onunload、onchange、this.selectedIndex

<!DOCTYPE html>

<title>BOM基础</title>

<style>

</style>

</head>

// 省市联动相关数据

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>

<form>

国家：<select id="country"onchange="changeCountry(this.selectedIndex)"></select>

省市：<select id="province"onchange="changeProvince(this.selectedIndex)"></select>

地区：<select id="area"></select>

</form>

</body>

</html>

0 0