<select id="products" name="products" tabindex="10" > <option value=" " selected="selected" > </option> <option value="All">All</option> <option value="Music">Music</option> <option value="Video">Videos</option> </select>//改为:<select id="products" name="products" tabindex="10" onchange="show(this.value)"> <option value=" " selected="selected" > </option> <option value="All">All</option> <option value="1">Music</option> <option value="2">Videos</option> </select>// onchange="show(this.value)" 三指当前元素改变时触发// 所以show(index) 中的参数值还有可能是all所以把js部分改为if (index == 1) { document.getElementById("music").style.display="block" document.getElementById("videos").style.display="none" } else if(index == 2) { document.getElementById("music").style.display="none" document.getElementById("vidoes").style.display="block" } else{document.getElementById("music").style.display="block" document.getElementById("vidoes").style.display="block" }<html>
<head>
<meta charset="utf-8" />
<title>yu.html</title>
<!-- <script type="text/javascript" src="jquery-1.9.0.min.js"></script> -->
<script type="text/javascript">
window.onload = function ()
{
var sel = document.getElementsByName ('selectDropDown')[0]
sel.onchange = function ()
{
var val = this.value
switch (val)
{
case "0":
alert(val)
break
case "-1":
alert(val)
break
case "220":
alert(val)
break
case "200":
alert(val)
break
case "10":
alert(val)
break
default:
alert(val)
break
}
}
}
</script>
</head>
<body>
<form name="form" action="">
<select name="selectDropDown">
<option value="0">0
<option value="-1">-1
<option value="220">220
<option value="200">200
<option value="10">10
</select>
</form>
</body>
</html>
下拉菜单不知您说的是哪种，表单元素提供了select下拉框，完全满足下拉菜单的需求。
如果是导航类的下拉菜单的话，首先给可选择的主体部分设置宽高，相对定位属性。然后主体部分建子标签，也就是下拉出来的部分，这部分设置display:none，绝对定位。通过事件是鼠标悬浮或者点击来动态切换子标签的display，none为隐藏，block为显示。
