jquery用div模拟一个下拉列表框
今天分享一个用我自己用jquery写的，用div模拟下拉列表select，这个效果网上有很多，但是写一个有自己思路的代码效果，更有成就感，先看截图：
自我感觉还有焦点获取效果没模拟出来，现在实在没想到好的办法，如果您有好的方法和思路，欢迎并谢谢你能告诉我。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>模拟下拉菜单</title> 6 <style> 7 * { margin: 0; padding: 0; } 8 body { font: 14px '微软雅黑'; color: #555; padding:50px; } 9 ul { list-style: none; } 10 p { margin-bottom: 20px; } 11 .model-select-box { width: 197px; height: 27px; line-height: 27px; border: 1px solid #aaa; float: left; margin-right: 20px; text-indent: 5px; position: relative; } 12 .model-select-text { height: 27px; padding-right: 27px; background: url(http://t43-2.yunpan.360.cn/p/800-600.e692334dad266bef653533e12fa291286932eb10.3619c0.jpg?t=64368e238226776012c7ea2a6ad4dcce&d=20140221) no-repeat right 0; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; } 13 .model-select-option { display: none; position: absolute; background: #fff; width: 100%; left: -1px; border: 1px solid #aaa; } 14 .model-select-option li { height: 22px; line-height: 22px; color: #555; cursor: pointer; } 15 .model-select-option li.seleced { background: #06C; color: #fff; } 16 </style> 17 </head> 18 19 <body> 20 <p>模拟下拉菜单</p> 21 <div class="model-select-box"> 22 <div class="model-select-text" data-value="">广州-08</div> 23 <ul class="model-select-option"> 24 <li data-option="1">上海-01</li> 25 <li data-option="2">北京-02</li> 26 <li data-option="3">沈阳-03</li> 27 <li data-option="4">天津-04</li> 28 <li data-option="5">武汉-05</li> 29 <li data-option="6">成都-06</li> 30 <li data-option="7">重庆-07</li> 31 <li data-option="8" class="seleced">广州-08</li> 32 <li data-option="9">拉萨-09</li> 33 <li data-option="10">石家庄-10</li> 34 <li data-option="11">乌鲁木齐-11</li> 35 <li data-option="12">济南-12</li> 36 <li data-option="13">哈尔滨-13</li> 37 <li data-option="14">吉林-14</li> 38 </ul> 39 </div> 40 <div class="model-select-box"> 41 <div class="model-select-text" data-value="">北京-02</div> 42 <ul class="model-select-option"> 43 <li data-option="1">上海-01</li> 44 <li data-option="2" class="seleced">北京-02</li> 45 <li data-option="3">沈阳-03</li> 46 <li data-option="4">天津-04</li> 47 </ul> 48 </div> 49 <div class="model-select-box"> 50 <div class="model-select-text" data-value="">武汉-05</div> 51 <ul class="model-select-option"> 52 <li data-option="1">上海-01</li> 53 <li data-option="2">北京-02</li> 54 <li data-option="3">沈阳-03</li> 55 <li data-option="4">天津-04</li> 56 <li data-option="5" class="seleced">武汉-05</li> 57 </ul> 58 </div> 59 <script src="jquery-1.7.1.min.js"></script> 60 <script> 61 $(function(){ 62 /* 63 * 模拟网页中所有的下拉列表select 64 */ 65 function selectModel(){ 66 var $box = $('div.model-select-box'); 67 var $option = $('ul.model-select-option', $box); 68 var $txt = $('div.model-select-text', $box); 69 var speed = 10; 70 /* 71 * 单击某个下拉列表时，显示当前下拉列表的下拉列表框 72 * 并隐藏页面中其他下拉列表 73 */ 74 $txt.click(function(e) { 75 $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function(){ 76 int($(this)); 77 }); 78 $(this).siblings('ul.model-select-option').slideToggle(speed, function(){ 79 int($(this)); 80 }); 81 return false; 82 }); 83 //点击选择，关闭其他下拉 84 /* 85 * 为每个下拉列表框中的选项设置默认选中标识 data-selected 86 * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected 87 * 为选项添加 mouseover 事件 88 */ 89 $option.find('li').each(function(index, element) { 90 if($(this).hasClass('seleced')){ 91 $(this).addClass('data-selected'); 92 } 93 }) 94 .mousedown(function(){ 95 $(this).parent().siblings('div.model-select-text').text($(this).text()) 96 .attr('data-value', $(this).attr('data-option')); 97
98 $option.slideUp(speed, function(){ 99 int($(this)); 100 }); 101 $(this).addClass('seleced data-selected').siblings('li').removeClass('seleced data-selected'); 102 return false; 103 }) 104 .mouseover(function(){ 105 $(this).addClass('seleced').siblings('li').removeClass('seleced'); 106 }); 107 //点击文档，隐藏所有下拉 108 $(document).click(function(e) { 109 $option.slideUp(speed, function(){ 110 int($(this)); 111 }); 112 }); 113 //初始化默认选择 114 function int(obj){ 115 obj.find('li.data-selected').addClass('seleced').siblings('li').removeClass('seleced'); 116 } 117 } 118 119 selectModel(); 120 }) 121 </script> 122 </body> 123 </html>
