用jq模拟select

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=utf-8 />
 5 <title>jq的select模拟</title>
 6 <meta name="viewport" content="width=device-width">
 7 <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 8 </head>
 9    <style>
10   *{ margin:0; padding:0;}
11      li{ list-style:none;}
12   body{ font:12px "Arial Black"; color:#666;}
13   .select_down{ margin:100px auto; position:relative; width:600px; min-height:300px; height:auto!important; height:300px; border:1px solid #ccc; padding:20px;}
14   .select_down dt{float:left;width:134px;position:relative;margin-right:5px;display:inline;}
15   .select_down h3{color: #919191; font-size:12px;font-weight:norm;border:1px solid #e5e5e5;height:18px;background:#fbfbfb;line-height: 18px;text-indent:8px;}
16   .select_down ul{width: 132px;border: 1px solid #e5e5e5;background:#fbfbfb;position: absolute;top: 18px;left: 0;
17 z-index: 1;text-indent:8px;display:none;}
18 .select_down ul li{height:22px;line-height: 22px;cursor:pointer;}
19 .select_down ul li.hover{background:#f2f2f2;}
20  .select_down dt a{background:url('http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_select.jpg') no-repeat;position:absolute;width:18px;height:18px;top:1px;right:1px; }
21   
22   
23 
24   
25   </style>
26 <body>
27   
28   <div class="select_down" id="sel">
29                              <dl>
30                             <dt>
31                                 <h3>select选择</h3>
32                                 <a href="javascript:;"></a>
33                                 <ul>
34                                     <li>jq的select模拟1</li>
35                                     <li>jq的select模拟2</li>
36                                     <li>jq的select模拟3</li>
37                                 </ul>
38                             </dt>
39                             <dt>
40                                 <h3>select选择2</h3>
41                                 <a href="javascript:;"></a>
42                                 <ul>
43                                     <li>jq的select模拟11</li>
44                                     <li>jq的select模拟22</li>
45                                     <li>jq的select模拟31</li>
46                                 </ul>
47                             </dt>
48                            
49                         </dl>
50                             
51                           
52                          </div>
53   <script>
54     $(function(){
55     var oBox=$("#sel").find("dt")
56     var oSlect=oBox.find("ul");
57     var oSlectLi=oSlect.find("li");
58     var oH3=oBox.find("h3");
59     var oSel=oBox.find("a");
60     oSel.each(function(){
61        $(this).click(function(e){
62            $(this).parents("dt").find("ul").show();
63            stopFunc(e);
64         });
65     })
66 
67     oSlectLi.each(function(){
68         $(this).hover(function(){
69             $(this).addClass("hover");
70         },function(){
71             $(this).removeClass("hover");
72         })
73         $(this).click(function(e){
74             var oValue=$(this).text();
75             $(this).parents("dt").find("h3").text(oValue);
76             $(this).parents("dt").find("ul").hide();
77 
78         })
79     })
80     $(document).click(function(e){
81         oSlect.hide();
82         })
83 })
84 function stopFunc(e){
85     document.all? event.cancelBubble = true : e.stopPropagation();
86 }
87 
88     
89   </script>
90   
91 </body>
92 </html>
在线预览：http://jsbin.com/ufofot/4/
posted on 2013-05-07 22:06 仙梦之飘阅读(618) 评论(0) 编辑收藏举报