1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>无标题文档</title>
5 <style type="text/css">
6 *{margin:0px auto;padding:0px;}
7 #sel{width:280px;height:40px;border:1px solid #c0f;margin-top:100px;line-height:40px;vertical-align:middle;padding-left:20px;}
8 #list{width:300px;height:200px;border-left:1px solid #c0f;border-right:1px solid #c0f;}
9 .item{width:280px;height:39px;border-bottom:1px solid #c0f;line-height:40px;vertical-align:middle;padding-left:20px;}
10 </style>
11 </head>
12
13 <body>
14 <div id="sel"></div>
15 <div id="list" style="display:none">
16 <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">北京</div>
17 <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">上海</div>
18 <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">广州</div>
19 <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">深圳</div>
20 <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">重庆</div>
21
22 </div>
23 </body>
24 <script type="text/javascript">
25 function xz(a){
26 var sy=document.getElementsByClassName("item");
27 for(var i=0;i<sy.length;i++){
28 sy[i].style.backgroundColor="white";
29 sy[i].style.color="black";
30 }
31 a.style.backgroundColor ="#ccc";
32 a.style.color="white";
33 }
34
35 var sel=document.getElementById("sel");
36 sel.onclick =function(){
37 var c=document.getElementById("list");
38 if(c.style.display=="none"){
39 c.style.display="block";
40 }else{
41 c.style.display="none";
42 }
43 }
44
45 function xuanzhong(a){
46 document.getElementById("list").style.display="none";
47 document.getElementById("sel").innerText =a.innerText;
48 }
49 </script>
50 </html>
