如何使用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所支持的功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！