小编给大家分享一下如何使用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实现选择所支持的功能