例子：下拉列表-CSDN博客

<!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>
 <style type="text/css">
    *{margin:0px auto; padding:0px;}
	#xiala{
			width:200px;
			height:40px;
			border:1px solid #036;
			text-align:center;
			line-height:40px;
			vertical-align:middle;}
	#xiala:hover{ cursor:pointer}
   .list{
	     width:200px;
		 height:40px;
		 text-align:center;
		 line-height:40px;
		 vertical-align:middle;
		 border:1px solid #306;
		 border-top-width:0px;
		 display:none;}
	.list:hover{
		background-color:#60F;
		color:#fff;}
   
 </style>
</head>

<body>

<div style="width:500px; height:500px;">
   <div id="xiala" οnclick="xianshi()"></div>
   <div class="list" οnclick="xuanze(this)">11</div>
   <div class="list" οnclick="xuanze(this)">22</div>
   <div class="list" οnclick="xuanze(this)">33</div>
   <div class="list" οnclick="xuanze(this)">44</div>
   <div class="list" οnclick="xuanze(this)">55</div>
</div>
</body>
<script type="text/javascript">
function xianshi()
{
	var list = document.getElementsByClassName("list");
	for( var i=0;i<list.length;i++)
	{
	   	list[i].style.display="block";
	}

}

function xuanze(a)
{
	var nr=a.innerHTML;
	document.getElementById("xiala").innerHTML=nr;
	
	var list = document.getElementsByClassName("list");
	for( var i=0;i<list.length;i++)
	{
	   	list[i].style.display="none";
	}

}





</script>
</html>

转载于:https://www.cnblogs.com/nuanai/p/6055615.html