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