首页 | 源码下载 | 网站模板 | 网页特效 | 广告代码 | 网页素材 | 字体下载 | 书库 | 站长工具

栏目导航

热点推荐

阅览排行

当前位置：主页>网络编程>Javascript教程>资讯:用JavaScript写的select所支持的功能介绍

用JavaScript写的select所支持的功能介绍

www.jz123.cn 2009-09-11 来源: 中国建站责任编辑(袁袁) 我要投递新闻

调用时可以这样：

　　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的对象

　　源代码：

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 ;
　　}

0

上一篇：Javascript函数类型判断完美解决方案下一篇：24小时退弹一次的代码，可弹SP2SP3遨游

相关文章列表

评论总数：0 条 [ 查看全部 ] 网友评论

关于我们 ┆ 隐私版权 ┆ 广告服务 ┆ 友情链接 ┆ 联系我们 ┆ 网站地图