如何使用JavaScript實現select所支持的功能

小編給大家分享一下如何使用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 ;   }

以上是“如何使用JavaScript實現select所支持的功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！