.se{ width:200px; border:#ccc solid 1px; height: 30px; position: relative; cursor:default; float: left; font-size: 12px; margin-right: 20px; } .se p{ margin:0px; padding:0px; display: block; position: absolute; width: 0px; height: 0px; border-width: 8px; border-style: solid; border-color: #ccc transparent transparent transparent; top: 10px; right: 10px; } .se ul{ margin:0px; padding:0px; position: absolute; top: 30px; left:-1px; width: 200px; border-left:#ccc solid 1px; border-right:#ccc solid 1px; border-top:#ccc solid 1px; } .se ul li{ border-bottom:#ccc solid 1px; height: 30px; line-height: 30px; list-style: none; margin:0px; padding:0px; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left:10px; padding-right: 10px; width: 180px; } .se ul li:hover{background: #ebebeb;} .se span{ width: 160px; height: 30px; display: block; line-height: 30px; overflow: hidden; padding-left:10px; text-overflow: ellipsis; white-space:nowrap; z-index: 1; } .se select{width: 100px; display: none;}

讯享网

讯享网function getClassNames(classStr,tagName){ if (document.getElementsByClassName) { return document.getElementsByClassName(classStr) }else { var nodes = document.getElementsByTagName(tagName),ret = []; for(i = 0; i < nodes.length; i++) { if(hasClass(nodes[i],classStr)){ ret.push(nodes[i]) } } return ret; } } function hasClass(tagStr,classStr){ var arr=tagStr.className.split(/\s+/ ); //正则表达式是因为class可以有多个,判断是否包含 for (var i=0;i<arr.length;i++){ if (arr[i]==classStr){ return true ; } } return false ; } window.οnlοad=function(){ var ose = getClassNames('se','div'); var onones = getClassNames('nones','ul');//选择页面上所有class为nones的元素 for(var c=0; c<ose.length;c++){ //var opt = set.getElementsByTagName('option'); var set = ose[c].getElementsByTagName('select')[0]; var oul = ose[c].getElementsByTagName('ul')[0]; var ospan= ose[c].getElementsByTagName('span')[0]; //获取到下拉菜单里的内容，添加到 新创建的li里。 for(var i=0; i<set.options.length;i++){ var intexts=set.options[i].text; var ali=document.createElement('li'); var number=set.options.length; for(var a=0; a<=number;a++){ oul.appendChild(ali).innerText=intexts; if (set.options[i].selected) { ospan.innerText=set.options[i].text } } } var aoul=null; ose[c].οnclick=function(ev){ aoul = this.getElementsByTagName('ul')[0]; var oli = this.getElementsByTagName('li'); var aset = this.getElementsByTagName('select')[0]; var aospan= this.getElementsByTagName('span')[0]; var oEvent=ev||event;//禁止事件冒泡 if(aoul.innerHTML){//只有当这个UL 标签里有内容的时候才会执行以下语句 if(aoul.style.display=='none'){//当前选择的菜单显示隐藏切换 for(var i=0; i<onones.length;i++){ onones[i].style.display="none";//隐藏页面所有class为nones的ul标签 aoul.style.display='block';//只显示当前选择的ul } } else{aoul.style.display='none'} } for(var i=0; i<oli.length;i++){ oli[i].index=i;//为每个li添加私有属性 oli[i].οnclick=function(){ aset.options[this.index].selected='selected'; //当前菜单options 的【点击的第N个li】 的内容被选择 aospan.innerText=this.innerText;//当前点击li的内容 显示在span里 } } oEvent.cancelBubble=true; } document.οnclick=function(){//点击页面非下拉菜单位置 当前选择的菜单隐藏 if (aoul) { aoul.style.display='none';} } } }

<div class="se"> <p></p> <select> <option>111</option> <option>会飞的两件事</option> <option>UI惹我</option> <option>昵称void</option> <option>555</option> </select> <span></span> <ul class="nones" style="display: none;"> </ul> </div> <div class="se"> <p></p> <select> <option>电视剧客户附近看到</option> <option>大水坑金凤凰</option> <option>大煞风景</option> <option>速度快两极分化</option> <option>第十六届后方可</option> <option>大水坑金凤凰的</option> <option>到了技术开发考虑到</option> <option>打算看见回复</option> <option>偶尔我也</option> </select> <span></span> <ul class="nones" style="display: none;"> </ul> </div> <div class="se"> <p></p> <select> <option>aaa</option> <option>222</option> <option>的富士康计划倒计时单身快乐交话费了</option> <option>oidfjuldkijfldklsjf ddaslkjhfdlskhfjdklis</option> <option>555</option> </select> <span></span> <ul class="nones" style="display: none;"> </ul> </div>