如何使用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所支持的功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网页标题：如何使用JavaScript实现select所支持的功能
URL链接：http://mswzjz.cn/article/jjsoji.html