soncy的七分责任田，种点瓜果蔬菜和杂草

赞助商广告

文章归档

最近文章

分类目录

功能

javascript+css模拟下拉框

发表于 2010年03月3日 soncy 296次阅读

浏览器自带的下拉框用起来挺方便，但是很多时候也会遇到麻烦，说说两个最大的麻烦吧 1，在IE下，下拉框无法自定义样式。 2，在IE下，下拉框的优先级最高，如果有遮盖效果的话，遮不住它。

这个时候模拟一个下拉框也是很必要的，自己写了一个简单的下拉框的模拟，效果：


JS部分：

下载: CsSelect.js
  1. function CsSelect(_data,_element){ 
  2.     if(typeof _element == "string"){ 
  3.         _element = document.getElementById(_element);
  4.     } 
  5.     var self = this;
  6.     self._value = "";
  7.     self.data = _data;
  8.     if(typeof self.data == "undefined" || self.data.length < 1) return;
  9.     this.insertAfter = function(newElement,targetElement){ 
  10.         var parent = targetElement.parentNode;
  11.         if(parent.lastChild == targetElement){ 
  12.             parent.appendChild(newElement);
  13.         }else{ 
  14.             parent.insertBefore(newElement,targetElement.nextSibling);
  15.         } 
  16.     };
  17.     var _htmlArr = [];
  18.     self._CsSelect = document.createElement("div");
  19.     self._CsSelect.className = "csSelect";
  20.     self._CsStitle = document.createElement("div");
  21.     self._CsStitle.className = "csStitle";
  22.     self._CsStitle.innerHTML = self.data[0][1];
  23.     _element.value = self.data[0][0];
  24.     self._CsSelect.appendChild(self._CsStitle);
  25.     self._CsSlist = document.createElement("ul");
  26.     self._CsSlist.className = "csSlist";
  27.     for(var i =0;i < self.data.length;i++){ 
  28.         var _tempData = self.data[i];
  29.         var _optValue = _tempData[0];//获取value值
  30.         var _optText = _tempData[1];//获取text值
  31.         _htmlArr.push('<li><a href="#" value="');
  32.         _htmlArr.push(_optValue);
  33.         _htmlArr.push('">');
  34.         _htmlArr.push(_optText);
  35.         _htmlArr.push('</a></li>');
  36.     } 
  37.     self._CsSlist.innerHTML = _htmlArr.join("");
  38.     self._CsSelect.appendChild(self._CsSlist);
  39.     //展示
  40.     var _parentNode = _element.parentNode;
  41.     _element.style.display = "none";
  42.     self.insertAfter(self._CsSelect,_element);
  43.     //事件注册
  44.     self._CsStitle.onclick = function(){ 
  45.         var _CsSlist = self._CsSlist;
  46.         var _Clist = document.getElementsByTagName("ul");
  47.         for(var i = 0;i < _Clist.length;i++){ 
  48.             if(_Clist[i].className.indexOf("csSlist") > -1 && _Clist[i] != self._CsSlist){ 
  49.                 _Clist[i].style.display = "none";
  50.             } 
  51.         } 
  52.         if(_CsSlist.style.display != "block"){ 
  53.             _CsSlist.style.visibility = "hidden";
  54.             _CsSlist.style.display = "block";
  55.             if(_CsSlist.offsetHeight > 200){ 
  56.                 _CsSlist.style.height = "200px";
  57.             } 
  58.             _CsSlist.style.visibility = "inherit";
  59.         }else{ 
  60.             _CsSlist.style.display = "none";
  61.             _CsSlist.style.height = "auto";
  62.         } 
  63.     };
  64.     var _csList = self._CsSlist.getElementsByTagName("a");
  65.     for(var i = 0;i < _csList.length;i ++){ 
  66.         _csList[i].onclick = function(event){ 
  67.             var ev = event || window.event;
  68.             var el = ev.srcElement || ev.target;
  69.             self._CsStitle.innerHTML = el.innerHTML;
  70.             _element.value = el.getAttribute("value");
  71.             self._CsSlist.style.display = "none";
  72.             self.change();
  73.             return false;
  74.         } 
  75.     };
  76.     this.change = function(){ 
  77.        
  78.     };
  79.     this.hide = function(){ 
  80.         self._CsSelect.style.display = "none";
  81.     };
  82.     this.show = function(){ 
  83.         self._CsSelect.style.display = "block";
  84.     };
  85.     this.setValue = function(value){ 
  86.         var _idx = 0;
  87.         for(var i = 0;i < self.data.length;i++){ 
  88.             if(self.data[i][0] == value){ 
  89.                 _idx = i;
  90.             } 
  91.         } 
  92.         self._CsStitle.innerHTML = self.data[_idx][1];
  93.         _element.value = self.data[_idx][0];
  94.     };
  95.     this.getValue = function(){ 
  96.         return _element.value;
  97.     };
  98.     if(window.addEventListener){ 
  99.         document.addEventListener("click" , function(event){ 
  100.             var ev = event || window.event;
  101.             var el = ev.srcElement || ev.target;
  102.             if(el.className == "csStitle") return;
  103.             var _Clist = document.getElementsByTagName("ul");
  104.             for(var i = 0;i < _Clist.length;i++){ 
  105.                 if(_Clist[i].className.indexOf("csSlist") > -1){ 
  106.                     _Clist[i].style.display = "none";
  107.                 } 
  108.             } 
  109.         },false);
  110.     }else{ 
  111.         document.attachEvent("onclick" , function(event){ 
  112.             var ev = event || window.event;
  113.             var el = ev.srcElement || ev.target;
  114.             if(el.className == "csStitle") return;
  115.             var _Clist = document.getElementsByTagName("ul");
  116.             for(var i = 0;i < _Clist.length;i++){ 
  117.                 if(_Clist[i].className.indexOf("csSlist") > -1){ 
  118.                     _Clist[i].style.display = "none";
  119.                 } 
  120.             } 
  121.         });
  122.     } 
  123. }

css部分：

下载: CsSelect.css
  1. .csSelect{position:relative;width:154px;} 
  2. .csStitle{cursor:pointer;border:1px solid #bababa;padding:4px;width:146px;background:#fff url(images/icon_CsSelect.gif) no-repeat right center;} 
  3. .csSlist{display:none;position:absolute;background:#fff;width:100%;border:1px solid #bababa;border-top:0;overflow-y:auto;overflow-x:hidden;} 
  4. .csSlist li{line-height:auto !important;margin:0 !important;} 
  5. .csSlist a{display:block;padding:2px 4px;color:#555;outline:none;} 
  6. .csSlist a:hover{background:#0069ca;color:#fff;}

用法： html部分：

  1. <input type="hidden" name="xxx" id="csselect" />

js部分:

  1. var selectData = [["value","text"],["value1","text1"]];
  2. var someSelect = new CsSelect(selectData,document.getElementById("csselect"));

需要用到的图片：

javascript , , 4 条评论

感谢您的浏览，如果您喜欢本站，可以通过Rss订阅本站,如需转载，请注明出处,谢谢!

2条评论 RSS 图标

莫矮水北 发表于2010年03月12日10:34

我之前也写过模拟的select，印象中有个问题是IE6下列表宽度不能自适应…

[回复]

soncy 回复于2010年03月13日13:14

:mrgreen: 我这个也不行，有空再改了

[回复]

keelii 发表于2010年03月5日09:15

博客换域名了，特来低调通知一下keelii.cn变成了keelii.com。欢迎断续围观哈，
果断关注我请点这里：
http://feed.feedsky.com/kily

[回复]

soncy 回复于2010年03月5日10:26

更新了

[回复]

发表评论



客官留步，你可能对以下文章也感兴趣

©2009-2010 soncy. All rights reserved. 转载请注明出处和具体链接. Powered by WordPress.RSS地图 | 博客地图

本站所有原创文章皆采用“署名-非商业性使用-相同方式共享 2.5 中国大陆”的创作共用协议。 Theme by Soncy