1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jQuery模拟select标签</title>
6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 $("#select").click(function(){
10 $(".option").toggle();
11 });
12 $(".option li").click(function(){
13 $("#select").text($(this).text());
14 $(".option").hide();
15 });
16 $(".option li").mouseover(function(){
17 $(".option li").removeClass("hover");
18 $(this).addClass("hover");
19 });
20 $(".select_box").mouseout(function(){
21 $(".option").hide();
22 });
23 $(".option").mouseover(function(){
24 $(".option").show();
25 });
26 });
27 </script>
28 <style>
29 *
30 {
31 margin:0;
32 padding:0;
33 }
34 ul, li
35 {
36 list-style: none;
37 }
38 #select
39 {
40 position:relative;
41 width:96px;
42 height:28px;
43 line-height:28px;
44 color:#7da1bb;
45 padding-left:14px;
46 background:url(http://www.w3cfuns.com/data/attachment/album/201203/26/1133367lvvy4n1418z6o8r.jpg) no-repeat;
47 }
48 .option
49 {
50 display:none;
51 width:108px;
52 height:auto;
53 border:1px solid #ACBABD;
54 position:absolute;
55 left:0;
56 top:28px;
57 }
58 .option li
59 {
60 color:#7da1bb;
61 border-bottom:1px solid #ACBABD;
62 line-height:28px;
63 padding:0 14px;
64 }
65 .option li.hover
66 {
67 background:#316AC5;
68 color:#FFF;
69 }
70 .select_box
71 {
72 width:112px;
73 height:auto;
74 }
75 </style>
76 </head>
77 <body>
78 <div class="select_box">
79 <div id="select">选择城市</div>
80 <ul class="option">
81 <li>北京</li>
82 <li>上海</li>
83 <li> 深圳</li>
84 </ul>
85 </div>
86 </body>
87 </html>
