例题二、用div做下拉列表
<title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px} #xiala{ 180px; height:33px; border:1px solid #999;text-align:center; line-height:33px; vertical-align:middle; } #xiala:hover{ cursor:pointer} #zi{180px; height:150px; border:1px solid #63C; border-top:0px; display:none} .list{180px; height:33px; text-align:center; line-height:33px; vertical-align:middle; border-bottom:1px solid #63C; background-color:#CCC} .list:hover{ cursor:pointer; background-color:#63C; color:white} </style> </head> <body> <div style="700px; height:500px; margin-top:30px"> <div id="xiala" onclick="Show()"></div> <div id="zi"> <div class="list" onclick="Xuan(this)">山东</div>//this表示一个元素这个元素相当于它本身。this写在哪一行里，就相当于这一行本身。 <div class="list" onclick="Xuan(this)">淄博</div> <div class="list" onclick="Xuan(this)">张店</div> </div> </div> </body> <script type="text/javascript"> function Show() { document.getElementById("zi").style.display="block"; } function Xuan(ys)//ys代表选中的元素（山东、淄博、张店所在的div） { var v = ys.innerText; document.getElementById("xiala").innerText = v; document.getElementById("zi").style.display="none"; } </script>