js 模拟select

最新推荐文章于 2022-05-28 21:45:39 发布

desmoss

最新推荐文章于 2022-05-28 21:45:39 发布

阅读量554

点赞数

文章标签： function border class input div

本文链接：https://blog.csdn.net/desmoss/article/details/7077312

版权

刚学习js，模拟的select，可能存在问题，希望路过的朋友多多建议

//样式

<style type="text/css">
#selectBox{ height:auto; overflow:hidden}
.select{ height:25px; overflow:hidden; border:1px solid #666; width:134px;line-height:25px;}
.selectText{ display:inline-block; width:110px; height:25px; padding-left:4px; vertical-align:middle; border:none }
.selectArrow{ display:inline-block; width:16px; height:16px; border:1px solid #990;vertical-align:middle; margin-right:2px; cursor:pointer}
.selectOption{ overflow:hidden; border:1px solid #666; width:134px; height:auto; overflow:hidden }
ul{ padding:0; margin:0; height:auto; overflow:hidden}
li{ list-style:none; padding:0; margin:0;}
.selectOption li{ height:23px; background-color:#CCC; border-bottom:1px solid #eee; cursor:pointer}
.selectOption .cur{ background-color:#903; color:#FFF}
</style>

//html

<div id="selectBox">
 <div class="select"><input class="selectText" type="text" value="--请选择--" /></span><span class="selectArrow"></span></div>
 <div class="selectOption" style="display:none">
   <ul>
   </ul>
 </div>
</div>

//js

<script type="text/javascript">
function getId(obj){
	return document.getElementById(obj)
	}
function getTagName(parent,elem){
	return parent.getElementsByTagName(elem)
	}
function eventHaldle(obj,type,func){
	return obj.addEventListener?obj.addEventListener(type,func,false):obj.attachEvent("on"+type,func)
	}
function selectOption(value,text){
	this.value=value
	this.text=text;
	}
var oSelectBox=getId("selectBox")
var selectText=getTagName(oSelectBox,"input")[0]
var aDiv=getTagName(oSelectBox,"div")
var oUl=getTagName(oSelectBox,"ul")[0]
var ali=getTagName(oUl,"li")

function  main(selectOption){
	for(var i=0,len=selectOption.length;i<len;i++){
		var aLi=[]
		    aLi[i]=document.createElement("li")
		aLi[i].innerHTML=selectOption[i].text
		oUl.appendChild(aLi[i])
		aLi[i].οnclick=function(){
			 selectText.value=this.innerHTML
			  this.className="cur"
			 hide()
			 }
		}
	}
function show(){
	aDiv[1].style.display="block"
	}
function hide(){
	aDiv[1].style.display="none"
		for(var i=0,len=ali.length;i<len;i++){
		  if(selectText.value != ali[i].innerHTML){
			  ali[i].className=""
			  }
		}
	
	}
eventHaldle(aDiv[0],"mouseover",show)
eventHaldle(oUl,"mouseover",show)
eventHaldle(oUl,"mouseout",hide)

function creatOptionData(){
	var  creatSelectOptionData=[]
	creatSelectOptionData[0]= new selectOption("","---请选择---")
	creatSelectOptionData[1]= new selectOption(1,"111111111")
	creatSelectOptionData[2]= new selectOption(2,"22222222")
	creatSelectOptionData[3]= new selectOption(3,"3333333333333")
	creatSelectOptionData[4]= new selectOption(4,"3333333333333")
	creatSelectOptionData[5]= new selectOption(5,"3333333333333")
	 main(creatSelectOptionData)
	}
	creatOptionData()
</script>