.
.
.
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>歌手及歌曲查询</title>
<script type="text/javascript">
var singers = new Array(); //歌手数组
singers["周杰伦"] = ["菊花台","蜗牛","夜的第七章"];
singers["许巍"] = ["时光","两天","彩虹","礼物"];
singers["黑鸭子合唱组"] = ["今天是你的生日","算逑歌"];
//为歌手列表添加值
function SetSinger(){
var singer = document.getElementById("singer"); //获得歌手列表框对象
for(var index in singers){
singer.options.add(new Option(index,index));
}
SetMusic();
}
//修改歌曲列表中的值
function SetMusic(){
var singer = document.getElementById("singer"); //获得歌手列表框对象
var music = document.getElementById("Music"); //获得歌曲列表框对象
music.length = 0; //清空下拉列表
for(var index in singers[singer.value]){
music.options.add(new Option(singers[singer.value][index],singers[singer.value][index]));
}
}
</script>
</head>
<body onload="SetSinger()">
<p>
<label>
歌手：
<select name="singer" id="singer" onchange="SetMusic()">
</select>
</label>
</p>
<p>
<label>
歌曲：
<select name="Music" id="Music">
</select>
</label>
</p>
</body>
</html>