下拉列表框级联

.

.

.

.

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

posted on 2011-06-06 15:49  0xCAFEBABE  阅读(1620)  评论(0)    收藏  举报

导航