<!DOCTYPE html>
<html>
<head>
<title>MyHtml_07.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<select id="select1" onchange="relation(this.value);">
<option>--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="俄罗斯">俄罗斯</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="select2">
</select>
</body>
<script type="text/javascript">
var arr=new Array(5);
arr[0]=["中国","北京","上海","深圳","广州","武汉","南京"];
arr[1]=["美国","纽约","华盛顿","休斯顿","洛杉矶","芝加哥"];
arr[2]=["俄罗斯","莫斯科","阿德马","奥伦堡","叶卡捷琳堡","圣彼得堡"];
arr[3]=["德国","柏林","法兰克福","汉诺威","科隆","杜塞尔多夫"];
arr[4]=["日本","东京","北海道","广岛","长崎","大阪"];
var select1=document.getElementById("select1");
var select2=document.getElementById("select2");
function relation(val){
var opss=select2.getElementsByTagName("option");
if(opss.length>0){
for(var k=0;k<opss.length;k++){
select2.removeChild(opss[k]);
k--;
}
}
for(var i=0;i<arr.length;i++){
var arr1=arr[i];
if(arr1[0]==val){
for(var j=1;j<arr1.length;j++){
var ops=document.createElement("option");
var textNode=document.createTextNode(arr1[j]);
ops.appendChild(textNode);
select2.appendChild(ops);
}
}
}
}
</script>
</html>
|
|