Simple Combo List

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30271335

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/daisuki/archive/2013/04/06/3002494.html

本文介绍了一个使用jQuery实现的简易组合列表插件，该插件能够创建一个可下拉的选择列表，并通过JavaScript控制其显示与隐藏。此外，还详细展示了如何通过事件监听来更新列表项的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  1 <!DOCTYPE html>
  2 <html lang="en">
  3   <head>
  4     <meta charset="utf-8">
  5     <meta name="daisuki" content="CoffeeCup HTML Editor (www.coffeecup.com)">
  6     <meta name="dcterms.created" content="周四, 04 四月 2013 04:41:08 GMT">
  7     <meta name="description" content="simple combolist using jquery">
  8     <meta name="keywords" content="combolist">
  9     <title>Simple Combolist Demo#1</title>
 10     
 11     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 12     <script type="text/javascript">
 13         var itemSelectedClassName = 'selected';
 14         
 15         $(document).ready(function(){
 16             setListBoxWidth();
 17             registerEvents();
 18         });
 19         
 20         //将下拉选项框的宽度和文本框的宽度相同
 21         function setListBoxWidth(){
 22             var listBoxArray = $('.listBox');
 23             for(var i = 0; i < listBoxArray.size(); i++){
 24                 var textBox = $(listBoxArray[i]).prev('.textBox');
 25                 var listBoxWidth = parseInt(textBox.css('width')) + parseInt(textBox.css('padding-left'))
 26                 $(listBoxArray[i]).css('width', listBoxWidth.toString() + 'px');
 27             }
 28         }
 29         
 30         function registerEvents(){
 31             //单击文本框的事件
 32             $('.textBox').click(function(){
 33                 var itsListBox = $(this).next('.listBox');
 34                 'none' == itsListBox.css('display')? showListBox(itsListBox):hideListBox(itsListBox);
 35             })
 36             .blur(function(e){    //要兼容FIREFOX的话，参数e必须加上。
 37                 //兼容IE,CHROME,FIREFOX 获取事件的srcElement
 38                 e = window.event || e;
 39                   var srcElement = e.srcElement || e.target;
 40                 
 41                 //鼠标点击别处隐藏listbox
 42                 if(0 == $(srcElement).next('.listBox').find('a:hover').size()){
 43                     hideListBox($(this).next('.listBox'));
 44                 }
 45             })
 46             
 47             //单击每个选项的事件
 48             $('.listBox a').click(function(e){
 49                 refreshListItems($(this).offsetParent().find('a'));
 50                 selectItem($(this));
 51                 hideListBox($(this).offsetParent());
 52                 
 53             })
 54             
 55             
 56         }
 57         
 58         //将同一个list下的选项重置
 59         function refreshListItems(list){
 60             for(var i = 0; i<list.size(); i++){
 61                 if(true == $(list[i]).hasClass(itemSelectedClassName)){
 62                     $(list[i]).removeClass(itemSelectedClassName);
 63                 }
 64             }
 65         }
 66         
 67         //在list中选择一个item
 68         function selectItem(item){
 69             item.addClass(itemSelectedClassName);
 70             item.offsetParent().prev('.textBox').text(item.text());
 71         }
 72         
 73         //显示一个listbox
 74         function showListBox(listBox){
 75             listBox.css('display', 'block');
 76         }
 77         
 78         //隐藏一个listbox
 79         function hideListBox(listBox){
 80             listBox.css('display', 'none');
 81         }
 82     </script>
 83     
 84     <!--[if IE]>
 85     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 86     <![endif]-->
 87     
 88     <style type="text/css">
 89     p{
 90         font-size:25px;
 91         font-family:'微软雅黑';
 92         font-weight:bold;
 93         text-align:center;
 94     }
 95     
 96     .combolist-wrapper{
 97         float:right; 
 98         width:180px;
 99      }
100     
101     .label{
102         display:block; 
103         float:left; 
104         height:30px;
105         width:65px; 
106         line-height:30px;
107         color:#333333;
108      }
109      
110      .textBox{
111         background:white url(http://www.shentongchina.com/images/search-ckBg.png) right top no-repeat;
112         cursor:pointer; 
113       }
114       
115      .listBox{
116          border-top:0px;
117          background-color:white;
118          display:none;
119          
120          /*让listbox显示在最上层*/
121          position:absolute;
122          z-index:999;
123       }
124      
125     .border{
126         border:1px solid #d6d6d6;
127      }
128       
129     .txtpadding{
130         padding-left:5px;
131      }
132        
133     .txtheight{
134         height:28px;
135         line-height:28px;
136      }
137      
138      
139     .listBox a{
140         text-decoration:none;
141         color:#333333;
142         display:block;
143      }
144       
145     .listBox a:hover{
146         background-color:#DCDEE0;
147      }
148       
149     .listBox a:active{
150         background-color:#A8D0F9;
151      }
152       
153     .selected{
154         background-color:#A8D0F9;
155     }
156     
157     .clear{
158         clear:both;
159         height:0px;
160      }
161     </style>
162   </head>
163   <body>
164       <p>Simple Combo List Demo</p>
165       <!-- combo list #1-->
166       <div style="width:250px; height:200px; background-color:#EDF3F3; padding:25px; margin:auto;">
167                 <div style="position:relative; margin-bottom:20px;">
168                       <span class="label">所在区域</span>
169                    <div class="combolist-wrapper">
170                     <!-- 给div加上 tabindex="-1" 使其在CHROME,FIREFOX...浏览器中可以获取焦点 -->
171                        <div class="border textBox txtheight txtpadding" tabindex="-1"></div>    
172                        <div class="border listBox">
173                             <a href="javascript:void(0)" class="txtheight txtpadding">宝山区</a>
174                             <a href="javascript:void(0)" class="txtheight txtpadding">卢湾区</a>
175                             <a href="javascript:void(0)" class="txtheight txtpadding">闵行区</a>
176                             <a href="javascript:void(0)" class="txtheight txtpadding">浦东新区</a>
177                        </div>
178                    </div>
179                 <div class="clear"></div>
180               </div>
181            
182             <div style="position:relative;">
183                    <span class="label">所在区域</span>
184                 <div class="combolist-wrapper">
185                     <div class="border textBox txtheight txtpadding" tabindex="-1"></div>
186                     <div class="border listBox">
187                         <a href="javascript:void(0)" class="txtheight txtpadding">浦东新区</a>
188                         <a href="javascript:void(0)" class="txtheight txtpadding">闵行区</a>
189                         <a href="javascript:void(0)" class="txtheight txtpadding">卢湾区</a>
190                         <a href="javascript:void(0)" class="txtheight txtpadding">宝山区</a>
191                     </div>
192                 </div>
193                 <div class="clear"></div>
194            </div>
195       </div>
196   </body>
197 </html>