<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>面向对象</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<script>
//定义省得相关信息
var sheng=['请选择','广东省','湖南省','湖北省'];
//定义是的相关信息
var shi = [[],['广州市','东莞市','珠海市'],['长沙市','株洲市','湘潭市'],['武汉市','宜昌市','荆门市']];
//封装一个DOM对象
function $(id){
return document.getElementById(id);
}
function createSheng(){
//遍历一维数组
for(var i in sheng){
//定义op对象
var op=new Option(sheng[i],i);
//追加元素到下拉列表
$('sheng').options.add(op);
}
}
function createShi(){
//获取省得索引信息
var index=$('sheng').selectedIndex;
//清除市的下拉选框
$('shi').length=0;
//遍历市的相关信息
for(var i in shi[index]){
var op =new Option(shi[index][i],i);
//追加元素
$('shi').options.add(op);
}
}
//定义一个window.onload事件
window.onload=function(){
createSheng();
//触发事件
$('sheng').onchange=createShi;
}
</script>
</head>
<body>
<select id='sheng'></select>
<select id='shi'></select>
</body>
</html>
