.
.
.
.
<!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>