首页 > 代码库 > 自定义样式的select下拉框
自定义样式的select下拉框
在网上看到了一个写的挺好挺简单的自定义select样式的插件，在理解了它的原理之后，自己也尝试着写了一个。
核心思想：将原来的<select><option></option></select>隐藏掉动态写进页面一个<div>在这里面用<dl><dt><dd>这样的结构代替原来的下拉框。
大概框架：<div class="i_selectbox">//这是用来包裹整个自定义的select框
<div class="i_currentselected"></div>//这是当前默认显示的select框
<div class="i_selectoption"></div> //这是选择是弹出的下拉框
</div>
全部代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <head> 4 <title></title> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 8 <style> 9 10 11 /* 这里来定义你自己的select框的样式 */ 12 .i_selectbox { 13 margin-top:20px; 14 height:32px; 15 position:relative; 16 font-size:14px 17 } 18 /* 默认显示的select框*/ 19 .i_selectbox .i_currentselected { 20 width:150px; 21 height:24px; 22 background:url(select.png) 176px 4px no-repeat; 23 border:1px solid #cdcdcd; 24 text-indent:10px; 25 line-height:24px; 26 cursor:pointer 27 } 28 /* 下拉选择框 */ 29 .i_selectbox .i_selectoption { 30 overflow-x:hidden; 31 overflow-y:hidden; 32 position:absolute; 33 left:0px; 34 top:17px; 35 padding:5px; 36 background-color:#fff; 37 background:rgba(255,255,255,.9); 38 border:1px solid #eee 39 } 40 .i_selectbox .i_selectoption dt { 41 height:24px; 42 background-color:#eee; 43 text-indent:5px; 44 font-style:italic; 45 color:#555; 46 line-height:24px; 47 } 48 .i_selectbox .i_selectoption dd{ 49 margin-left: -3px; 50 height:30px; 51 border-bottom:1px solid #cdcdcd; 52 cursor:pointer; 53 text-indent:2px; 54 line-height:30px 55 } 56 .i_selectbox .i_selectoption dd:hover{ 57 background-color:#cdcdcd; 58 color:#fff 59 } 60 .i_selectbox .i_selectoption dd.selected{ 61 background-color:#f17f36; 62 color:#fff 63 } 64 </style> 65 <head> 66 <body> 67 <select class="my_select"> 68 69 <option value="0">Alabama</option> 70 <option value="1">Alaska</option> 71 <option value="2">Arizona</option> 72 73 <option value="3">Arkansas</option> 74 <option value="4">California</option> 75 <option value="5">Colorado</option> 76 77 <option value="6">Connecticut</option> 78 <option value="7">Delaware</option> 79 <option value="8">Columbia</option> 80 <option value="9">Florida</option> 81 82 </select> 83 <script> 84 85 /*插件写法的函数*/ 86 $.fn.newStyle = function(){ 87 var set = { 88 selectbox : ‘i_selectbox‘, 89 showselect : ‘i_currentselected‘, 90 selectoption : ‘i_selectoption‘, 91 curselect : ‘selected‘, 92 width : 200, 93 height :150, 94 zindex : 2 95 }; 96 /*让最初的select隐藏*/ 97 $(this).hide(); 98 /*动态写进去html替代原本的select*/ 99 var html = ‘<div class="‘+set.selectbox+‘" style="zindex:‘+set.zindex+‘">‘100 +‘<div class="‘+set.showselect+‘" style="width:‘+set.width+‘px;">‘+$(this).find(‘option:selected‘).text()+‘</div>‘101 +‘<dl class="‘+set.selectoption+‘" style="display:none;width:‘+set.width+‘px" >‘;102 if($(this).find(‘optgroup‘).size()>0){103 $(this).find(‘optgroup‘).each(function(){104 html += ‘<dt>‘+$(this).attr(‘label‘)+‘</dt>‘;105 $(this).find(‘option‘).each(function(){106 if($(this).is(‘:selected‘)){107 html += ‘<dd class="‘+set.curselect+‘">‘+$(this).text()+‘</dd>‘;108 }else{109 html += ‘<dd>‘+$(this).text()+‘</dd>‘;110 }111 });112 });113 }else{114 $(this).find(‘option‘).each(function(){115 if($(this).is(‘:selected‘)){116 html += ‘<dd class="‘+set.curselect+‘">‘+$(this).text()+‘</dd>‘;117 }else{118 html += ‘<dd>‘+$(this).text()+‘</dd>‘;119 }120 });121 122 }123 /*将html插入到select框的后面*/124 $(‘select‘).after(html);125 console.log(0);126 /*添加事件*/127 128 /*默认显示框的选择事件*/129 $(‘.‘+set.showselect).toggle(function(){130 console.log(1);131 /*$(‘.selectoption‘).hide();*/132 $(‘.‘+set.selectbox).css(‘zindex‘,set.zindex);133 $(‘.‘+set.selectoption).css(‘zindex‘,set.zindex+1);134 $(‘.‘+set.selectoption).toggle();135 },function(){136 $(‘.‘+set.selectoption).css(‘zindex‘,set.zindex);137 $(‘.‘+set.selectoption).toggle();138 });139 /*下拉列表的选择事件*/140 $(‘.‘+set.selectoption).find(‘dd‘).click(function(){141 console.log(2);142 $(this).addClass(set.curselect).siblings().removeClass(set.curselect);143 var index = $(‘.‘+set.selectoption).find(‘dd‘).index(this);144 $(‘.‘+set.showselect).text($(this).text());145 $(this).find(‘option‘).eq(index).attr(‘selected‘,‘selected‘);146 $(‘.‘+set.selectoption).hide();147 });148 /*点击select框之外的其他部分的时候select框应该收起*/149 $(‘html,body‘).click(function(e){150 /* 判断当前的点击事件目标不是set.selectoption这个class*/151 if(e.target.className.indexOf(set.selectoption)==-1){152 $(‘.‘+set.selectoption).hide();153 $(‘.‘+set.selectbox).css(‘zIndex‘,set.zindex);154 }155 });156 157 }158 159 $(‘.my_select‘).newStyle();160 161 </script>162 </body>163 </html>
各个浏览器的兼容性还蛮好的喔~~
源插件地址：http://mrthink.net/jquery-select-isimulateselect/
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。