浅析用JavaScript实现select所支持的功能

在进行JavaScript实现select所支持的功能实现时，首先需要了解一些标识的定义，比如true-这个是控制单击时出现下拉框体的标识等等。

为卫辉等地区用户提供了全套网页设计制作服务，及卫辉网站建设行业解决方案。主营业务为成都网站建设、网站建设、卫辉网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

调用时可以这样：

1，tempStr=GetNewSelectStr(dataTable.value,"select"+rowIndex,true);

2,makeSelectBox("select"+rowIndex,tempStr,value,obj);

tempStr-这个是返回的下拉列表值的框体

dataTable.value-这个是数据源(我这里是一张表)

"select"+rowIndex-这个是ID号，也就是当前这个select的id号(我这里是有多个select所以ID号是自动的)

true-这个是控制单击时出现下拉框体的标识

value-这个是初始的时候显示在select输入框中的值

obj-这个是要显示select的对象

JavaScript实现select源代码：

 
 
 

  
  
  
var nowOpenedSelectBox = "";   
  
  
  
　　var mousePosition = "";   
  
  
  
　　var userList=null;   
  
  
  
　　function selectThisValue(thisId,thisIndex,thisValue,thisString) {   
  
  
  
　　var objId = thisId;   
  
  
  
　　var nowIndex = thisIndex;   
  
  
  
　　var valueString = thisString;   
  
  
  
　　var sourceObj = $(objId);   
  
  
  
　　var nowSelectedValue = document.getElementById(nowIndex+thisId).innerHTML;   
  
  
  
　　hideOptionLayer(objId);   
  
  
  
　　if (sourceObj) sourceObj.value = nowSelectedValue;   
  
  
  
　　settingValue(objId,valueString);   
  
  
  
　　selectBoxFocus(objId);   
  
  
  
　　if (sourceObj.onchange) sourceObj.onchange();   
  
  
  
　　}   
  
  
  
　　function settingValue(thisId,thisString) {   
  
  
  
　　var objId = thisId;   
  
  
  
　　var valueString = thisString;   
  
  
  
　　var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");   
  
  
  
　　if (selectedArea) {   
  
  
  
　　if(navigator.appName.indexOf("Explorer") > -1){   
  
  
  
　　selectedArea.innerText = valueString;   
  
  
  
　　}   
  
  
  
　　else{   
  
  
  
　　selectedArea.textContent = valueString;   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　var l=0;   
  
  
  
　　//显示下拉框中的值   
  
  
  
　　function viewOptionLayer(thisId,Istask,flag) {   
  
  
  
　　var objId = thisId;   
  
  
  
　　var selectInfo="";   
  
  
  
　　var optionHeight = 18; // 高   
  
  
  
　　var optionMaxNum = 7; //   
  
  
  
　　var optionInnerLayerHeight = "";   
  
  
  
　　var selectBoxWidth =130;   
  
  
  
　　var selectBoxHeight =17;   
  
  
  
　　l=userList.Rows.length;   
  
  
  
　　var optionLayer = document.getElementById(objId+"selectBoxs");   
  
  
  
　　if(optionLayer.innerHTML=="")   
  
  
  
　　{   
  
  
  
　　if (l > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";   
  
  
  
　　selectInfo = "";   
  
  
  
　　if(Istask=="true")   
  
  
  
　　{   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　}   
  
  
  
　　else   
  
  
  
　　{   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　}   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　selectInfo += " ";   
  
  
  
　　for (var i=0 ; i < l ; i++)   
  
  
  
　　{   
  
  
  
　　var nowValue = userList.Rows[i][userList.Columns[0].Name];   
  
  
  
　　var nowText = userList.Rows[i][userList.Columns[0].Name];   
  
  
  
　　if(Istask=="true")   
  
  
  
　　{   
  
  
  
　　selectInfo += " ";   
  
  
  
　　}   
  
  
  
　　else   
  
  
  
　　{   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　}   
  
  
  
　　selectInfo += " " + nowText + "";   
  
  
  
　　// selectInfo += " ";   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　}   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　selectInfo += " ";   
  
  
  
　　selectInfo += "    
  
  
  
";   
  
  
  
　　selectInfo +=   
  
  
  
　　"";   
  
  
  
　　optionLayer.innerHTML=selectInfo;   
  
  
  
　　}   
  
  
  
　　if (flag && optionLayer.style.display=="none"){ optionLayer.style.display = "";optionLayer.focus();}   
  
  
  
　　else   
  
  
  
　　{   
  
  
  
　　optionLayer.style.display = "none";   
  
  
  
　　if(document.getElementById("level"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("level").style.display="";   
  
  
  
　　}   
  
  
  
　　if(document.getElementById("priority"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("priority").style.display="";   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　if(!flag){optionLayer.style.display = "";optionLayer.focus();}   
  
  
  
　　for(var i=0;i    
  
  
  
　　{   
  
  
  
　　if(document.getElementById("select"+i+""+"viewOptions"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("select"+i+""+"viewOptions").style.display="none";   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　document.getElementById(objId+"viewOptions").style.display="";   
  
  
  
　　if(document.getElementById("level"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("level").style.display="none";   
  
  
  
　　}   
  
  
  
　　if(document.getElementById("priority"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("priority").style.display="none";   
  
  
  
　　}   
  
  
  
　　nowOpenedSelectBox = objId;   
  
  
  
　　setMousePosition("inBox");   
  
  
  
　　}   
  
  
  
　　//支持首字母筛选、回车键取值、上下键选值功能   
  
  
  
　　function firstLetter(thisId){   
  
  
  
　　var count=0;   
  
  
  
　　var selectedVal="";   
  
  
  
　　if(document.getElementById(thisId+"viewOptions").style.display=="")   
  
  
  
　　{   
  
  
  
　　document.getElementById(thisId+"viewOptions").focus();   
  
  
  
　　var asciiCode=String.fromCharCode(event.keyCode).toLowerCase();   
  
  
  
　　var selectValue="";   
  
  
  
　　if(event.keyCode==38)   
  
  
  
　　{   
  
  
  
　　for(var i=0;i    
  
  
  
　　{   
  
  
  
　　if(document.getElementById(i+thisId).className=="selectBoxOptionOver" && i>0)   
  
  
  
　　{   
  
  
  
　　document.getElementById(i+thisId).style.backgroundColor='#ffffff';   
  
  
  
　　document.getElementById(i+thisId).style.color='#253449';   
  
  
  
　　document.getElementById(i+thisId).className='selectBoxOption';   
  
  
  
　　document.getElementById((i-1)+thisId).style.backgroundColor='#2c59aa';   
  
  
  
　　document.getElementById((i-1)+thisId).style.color='#ffffff';   
  
  
  
　　document.getElementById((i-1)+thisId).className='selectBoxOptionOver';   
  
  
  
　　document.getElementById(thisId+"viewOptions").scrollTop= (i-1)*20;   
  
  
  
　　count=1;   
  
  
  
　　break;   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　if(count==0)   
  
  
  
　　{   
  
  
  
　　document.getElementById((l-1)+thisId).style.backgroundColor='#2c59aa';   
  
  
  
　　document.getElementById((l-1)+thisId).style.color='#ffffff';   
  
  
  
　　document.getElementById((l-1)+thisId).className='selectBoxOptionOver';   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　if(event.keyCode==40)   
  
  
  
　　{   
  
  
  
　　for(var i=0;i    
  
  
  
　　{   
  
  
  
　　if(document.getElementById(i+thisId).className=="selectBoxOptionOver" && i    
  
  
  
　　{   
  
  
  
　　document.getElementById(i+thisId).style.backgroundColor='#ffffff';   
  
  
  
　　document.getElementById(i+thisId).style.color='#253449';   
  
  
  
　　document.getElementById(i+thisId).className='selectBoxOption';   
  
  
  
　　document.getElementById((i+1)+thisId).style.backgroundColor='#2c59aa';   
  
  
  
　　document.getElementById((i+1)+thisId).style.color='#ffffff';   
  
  
  
　　document.getElementById((i+1)+thisId).className='selectBoxOptionOver';   
  
  
  
　　if(i>10)   
  
  
  
　　{   
  
  
  
　　document.getElementById(thisId+"viewOptions").scrollTop= (i+1)*19;   
  
  
  
　　}   
  
  
  
　　else   
  
  
  
　　{   
  
  
  
　　document.getElementById(thisId+"viewOptions").scrollTop= (i+1)*10;   
  
  
  
　　}   
  
  
  
　　count=1;   
  
  
  
　　break;   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　&nb   
  
  
  
　　sp; if(count==0)   
  
  
  
　　{   
  
  
  
　　document.getElementById(0+thisId).style.backgroundColor='#2c59aa';   
  
  
  
　　document.getElementById(0+thisId).style.color='#ffffff';   
  
  
  
　　document.getElementById(0+thisId).className='selectBoxOptionOver';   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　if(event.keyCode==13)   
  
  
  
　　{   
  
  
  
　　for(var i=0;i    
  
  
  
　　{   
  
  
  
　　if(document.getElementById(i+thisId).className=="selectBoxOptionOver")   
  
  
  
　　{   
  
  
  
　　selectedVal=document.getElementById(i+thisId).innerHTML;   
  
  
  
　　var sourceObj = $(thisId);   
  
  
  
　　hideOptionLayer(thisId);   
  
  
  
　　if (sourceObj) sourceObj.value = selectedVal;   
  
  
  
　　settingValue(thisId,selectedVal);   
  
  
  
　　selectBoxFocus(thisId);   
  
  
  
　　if (sourceObj.onchange) sourceObj.onchange();   
  
  
  
　　document.getElementById(thisId+"viewOptions").style.display="none";   
  
  
  
　　if(document.getElementById("level"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("level").style.display="";   
  
  
  
　　}   
  
  
  
　　if(document.getElementById("priority"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("priority").style.display="";   
  
  
  
　　}   
  
  
  
　　break;   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　for(var i=0 ; i < l ; i++)   
  
  
  
　　{   
  
  
  
　　selectValue=document.getElementById(i+thisId).innerHTML;   
  
  
  
　　if(asciiCode==selectValue.substring(0,1))   
  
  
  
　　{   
  
  
  
　　resetStyle(thisId);   
  
  
  
　　document.getElementById(i+thisId).style.backgroundColor='#2c59aa';   
  
  
  
　　document.getElementById(i+thisId).style.color='#ffffff';   
  
  
  
　　document.getElementById(i+thisId).className='selectBoxOptionOver';   
  
  
  
　　document.getElementById(thisId+"viewOptions").scrollTop= i*19;   
  
  
  
　　break;   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　//清除被选中的下拉列表值的样式   
  
  
  
　　function resetStyle(thisId){   
  
  
  
　　for(var i=0;i    
  
  
  
　　{   
  
  
  
　　document.getElementById(i+thisId).style.backgroundColor='#ffffff';   
  
  
  
　　document.getElementById(i+thisId).style.color='#253449';   
  
  
  
　　document.getElementById(i+thisId).className='selectBoxOption';   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　//隐藏下拉框   
  
  
  
　　function hideOptionLayer(thisId) {   
  
  
  
　　var objId = thisId;   
  
  
  
　　var optionLayer = document.getElementById(objId+"selectBoxs");   
  
  
  
　　if (optionLayer) optionLayer.style.display = "none";   
  
  
  
　　if(document.getElementById("level"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("level").style.display="";   
  
  
  
　　}   
  
  
  
　　if(document.getElementById("priority"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("priority").style.display="";   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　function setMousePosition(thisValue) {   
  
  
  
　　var positionValue = thisValue;   
  
  
  
　　mousePosition = positionValue;   
  
  
  
　　}   
  
  
  
　　function clickMouse() {   
  
  
  
　　if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox);   
  
  
  
　　}   
  
  
  
　　function selectBoxFocus(thisId) {   
  
  
  
　　var objId = thisId;   
  
  
  
　　var obj = document.getElementById(objId + "selectBoxSelectedValue");   
  
  
  
　　obj.className = "selectBoxSelectedAreaFocus";   
  
  
  
　　obj.focus();   
  
  
  
　　}   
  
  
  
　　function selectBoxBlur(thisId) {   
  
  
  
　　var objId = thisId;   
  
  
  
　　var obj = document.getElementById(objId + "selectBoxSelectedValue");   
  
  
  
　　obj.className = "selectBoxSelectedArea";   
  
  
  
　　}   
  
  
  
　　function hiddenOptions(thisId){   
  
  
  
　　document.getElementById(thisId+"viewOptions").style.display="none";   
  
  
  
　　if(document.getElementById("level"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("level").style.display="";   
  
  
  
　　}   
  
  
  
　　if(document.getElementById("priority"))   
  
  
  
　　{   
  
  
  
　　document.getElementById("priority").style.display="";   
  
  
  
　　}   
  
  
  
　　}   
  
  
  
　　function makeSelectBox(index,newSelect,value,obj) {   
  
  
  
　　newSelect=newSelect.replace(/(select0)/g,index);   
  
  
  
　　$(obj).html(newSelect);   
  
  
  
　　settingValue(index,value);   
  
  
  
　　}   
  
  
  
　　function GetNewSelectStr(table,index,IsTask){   
  
  
  
　　userList=table;   
  
  
  
　　var downArrowSrc = "../images/sanjiao.gif"; //三角   
  
  
  
　　var downArrowSrcWidth = 16; //宽   
  
  
  
　　var selectBoxWidth =130;   
  
  
  
　　var selectBoxHeight =17;   
  
  
  
　　newSelect="   
  
  
  
"   
  
  
  
　　; newSelect += "";   
  
  
  
　　newSelect += " ";   
  
  
  
　　newSelect += " ";   
  
  
  
　　newSelect += " ";   
  
  
  
　　if(IsTask)   
  
  
  
　　{   
  
  
  
　　newSelect += " ";   
  
  
  
　　newSelect += " ";   
  
  
  
　　}   
  
  
  
　　else   
  
  
  
　　{   
  
  
  
　　newSelect += "    
  
  
  
";   
  
  
  
　　newSelect += " ";   
  
  
  
　　}   
  
  
  
　　newSelect += " ";   
  
  
  
　　newSelect += "    
  
  
  
";   
  
  
  
　　newSelect += " ";   
  
  
  
　　newSelect += " ";   
  
  
  
　　newSelect += "    
  
  
  
";   
  
  
  
　　newSelect += "";   
  
  
  
　　return newSelect ;   
  
  
  
　　}  
 
 
 

【编辑推荐】

1. JSON是什么？为JavaScript准备的数据格式
2. 十个最常用的JavaScript自定义函数
3. 有关JavaScript事件加载的一些延伸思考
4. JavaScript使用心得汇总：从BOM和DOM谈起
5. ExtJS在Android模拟器上的运行效果

文章名称：浅析用JavaScript实现select所支持的功能
网页网址：http://wtcwzsj.com/article/cdcgihd.html