您的位置：首页 > Web前端 > JavaScript

JavaScript--05 DOM基础 12.1

2016-07-16 17:07 363 查看

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 onload="initCountryProvinceArea() "
onunload = "onunloadFuncOfBody()" id="bodyId">

<form>

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

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

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

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航