用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>
关注web前端