jquery用div模拟一个下拉列表框

浏览数：51 / 时间：2015年06月09日

今天分享一个用我自己用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>