如何使用JavaScript实现选择所支持的功能

小编给大家分享一下如何使用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=https://www.yisu.com/zixun/"";   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 

如何使用JavaScript实现选择所支持的功能