欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-28 22:14:36
自我感觉还有焦点获取效果没模拟出来,现在实在没想到好的办法,如果您有好的方法和思路,欢迎并谢谢你能告诉我。   复制代码   1
自我感觉还有焦点获取效果没模拟出来,现在实在没想到好的办法,如果您有好的方法和思路,欢迎并谢谢你能告诉我。

 

复制代码

  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 <p class="model-select-box">

 22   <p class="model-select-text" data-value="">广州-08</p>

 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 </p>

 40 <p class="model-select-box">

 41   <p class="model-select-text" data-value="">北京-02</p>

 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 </p>

 49 <p class="model-select-box">

 50   <p class="model-select-text" data-value="">武汉-05</p>

 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 </p>

 59 <script src="jquery-1.7.1.min.js"></script> 

 60 <script>

 61 $(function(){

 62     /*

 63      * 模拟网页中所有的下拉列表select

 64      */

 65     function selectModel(){

 66         var $box = $('p.model-select-box');

 67         var $option = $('ul.model-select-option', $box);

 68         var $txt = $('p.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('p.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>