.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>
可以把css select 把display 显示下看看!