在原有的select下拉菜单 定制div样式 与原有select菜单关联！

.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 显示下看看！