浅析用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模拟器上的运行效果