淺析用JavaScript實(shí)現(xiàn)select所支持的功能

作者：佚名 2009-09-11 10:44:07

本文對(duì)用JavaScript實(shí)現(xiàn)select所支持的功能進(jìn)行介紹，同時(shí)也介紹一些標(biāo)識(shí)的定義，希望本文能對(duì)大家有所幫助。

在進(jìn)行JavaScript實(shí)現(xiàn)select所支持的功能實(shí)現(xiàn)時(shí)，首先需要了解一些標(biāo)識(shí)的定義，比如true-這個(gè)是控制單擊時(shí)出現(xiàn)下拉框體的標(biāo)識(shí)等等。

調(diào)用時(shí)可以這樣：

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

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

tempStr-這個(gè)是返回的下拉列表值的框體

dataTable.value-這個(gè)是數(shù)據(jù)源(我這里是一張表)

"select"+rowIndex-這個(gè)是ID號(hào)，也就是當(dāng)前這個(gè)select的id號(hào)(我這里是有多個(gè)select所以ID號(hào)是自動(dòng)的)

true-這個(gè)是控制單擊時(shí)出現(xiàn)下拉框體的標(biāo)識(shí)

value-這個(gè)是初始的時(shí)候顯示在select輸入框中的值

obj-這個(gè)是要顯示select的對(duì)象

JavaScript實(shí)現(xiàn)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 ;   
　　}