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

  1 <html>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  4 <title>模拟下拉菜单</title>
  5 <style>
  6 * { margin: 0; padding: 0; }
  7 body { font: 14px '微软雅黑'; color: #555; padding:50px; }
  8 ul { list-style: none; }
  9 p { margin-bottom: 20px; }
 10 .model-select-box { width: 197px; height: 27px; line-height: 27px; border: 1px solid #aaa; float: left; margin-right: 20px; text-indent: 5px; position: relative; }
 11 .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; }
 12 .model-select-option { display: none; position: absolute; background: #fff; width: 100%; left: -1px; border: 1px solid #aaa; }
 13 .model-select-option li { height: 22px; line-height: 22px; color: #555; cursor: pointer; }
 14 .model-select-option li.seleced { background: #06C; color: #fff; }
 15 </style>
 16 </head>
 17 
 18 <body>
 19 <p>模拟下拉菜单</p>
 20 <div class="model-select-box">
 21   <div class="model-select-text" data-value="">广州-08</div>
 22   <ul class="model-select-option">
 23     <li data-option="1">上海-01</li>
 24     <li data-option="2">北京-02</li>
 25     <li data-option="3">沈阳-03</li>
 26     <li data-option="4">天津-04</li>
 27     <li data-option="5">武汉-05</li>
 28     <li data-option="6">成都-06</li>
 29     <li data-option="7">重庆-07</li>
 30     <li data-option="8" class="seleced">广州-08</li>
 31     <li data-option="9">拉萨-09</li>
 32     <li data-option="10">石家庄-10</li>
 33     <li data-option="11">乌鲁木齐-11</li>
 34     <li data-option="12">济南-12</li>
 35     <li data-option="13">哈尔滨-13</li>
 36     <li data-option="14">吉林-14</li>
 37   </ul>
 38 </div>
 39 <div class="model-select-box">
 40   <div class="model-select-text" data-value="">北京-02</div>
 41   <ul class="model-select-option">
 42     <li data-option="1">上海-01</li>
 43     <li data-option="2" class="seleced">北京-02</li>
 44     <li data-option="3">沈阳-03</li>
 45     <li data-option="4">天津-04</li>
 46   </ul>
 47 </div>
 48 <div class="model-select-box">
 49   <div class="model-select-text" data-value="">武汉-05</div>
 50   <ul class="model-select-option">
 51     <li data-option="1">上海-01</li>
 52     <li data-option="2">北京-02</li>
 53     <li data-option="3">沈阳-03</li>
 54     <li data-option="4">天津-04</li>
 55     <li data-option="5" class="seleced">武汉-05</li>
 56   </ul>
 57 </div>
 58 <script src="cxx/jquery.min.js"></script> 
 59 <script>
 60 $(function(){
 61     /*
 62      * 模拟网页中所有的下拉列表select
 63      */
 64     function selectModel(){
 65         var $box = $('div.model-select-box');
 66         var $option = $('ul.model-select-option', $box);
 67         var $txt = $('div.model-select-text', $box);
 68         var speed = 10;
 69         /*
 70          * 单击某个下拉列表时，显示当前下拉列表的下拉列表框
 71          * 并隐藏页面中其他下拉列表
 72          */
 73         $txt.click(function(e) {
 74                 $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function(){
 75                     int($(this));
 76                 });
 77                 $(this).siblings('ul.model-select-option').slideToggle(speed, function(){
 78                     int($(this));
 79                 });
 80                 return false;
 81             });
 82         //点击选择，关闭其他下拉
 83         /*
 84          * 为每个下拉列表框中的选项设置默认选中标识 data-selected
 85          * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
 86          * 为选项添加 mouseover 事件
 87          */
 88         $option.find('li').each(function(index, element) {
 89                 if($(this).hasClass('seleced')){
 90                     $(this).addClass('data-selected');
 91                 }
 92             })
 93             .mousedown(function(){
 94                 $(this).parent().siblings('div.model-select-text').text($(this).text())
 95                     .attr('data-value', $(this).attr('data-option'));
 96                 
 97                 $option.slideUp(speed, function(){
 98                     int($(this));
 99                 });
100                 $(this).addClass('seleced data-selected').siblings('li').removeClass('seleced data-selected');
101                 return false;
102             })
103             .mouseover(function(){
104                 $(this).addClass('seleced').siblings('li').removeClass('seleced');
105             });
106         //点击文档，隐藏所有下拉
107         $(document).click(function(e) {
108             $option.slideUp(speed, function(){
109                 int($(this));
110             });
111         });
112         //初始化默认选择
113         function int(obj){
114             obj.find('li.data-selected').addClass('seleced').siblings('li').removeClass('seleced');
115         }
116     }
117 
118     selectModel();
119 })
120 </script>
121 </body>
122 </html>

 

posted @ 2017-04-03 09:59  chenxiangxiang  阅读(2414)  评论(0)    收藏  举报