一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能


Posted in Javascript onSeptember 09, 2009

调用时可以这样:

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

源代码:
<script type="text/javascript">
var tempStr=GetNewSelectStr(dataTable.value,"select"+rowIndex,true);
makeSelectBox("select"+rowIndex,tempStr,value,obj);
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 = "<table class='selectTable' id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;'>";
if(Istask=="true")
{
selectInfo += " <tr>";
selectInfo += " <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=\"hideOptionLayer('"+ objId + "')\"></td>";
selectInfo += " </tr>";
selectInfo += " <tr>";
selectInfo += " <td style='height:2px;overflow:hidden;'></td>";
selectInfo += " </tr>";
}
else
{
selectInfo += " <tr style='height:24px;'>";
selectInfo += " <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=\"hideOptionLayer('"+ objId + "')\"></td>";
selectInfo += " </tr>";
}
selectInfo += " <tr style='height:17px;line-height:17px;border:none;'>";
selectInfo += " <td>";
selectInfo += " <div id='"+objId+"viewOptions' class='selectBoxOptionInnerLayer' style='width:" + selectBoxWidth + "px;" + optionInnerLayerHeight + "'>";
selectInfo += " <table class='selectTable' cellpadding='0' cellspacing='0' border='0' width='98%'>";
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 += " <tr>";
}
else
{
selectInfo += " <tr style='height:17px;line-height:17px; border:none;'>";
}
selectInfo += " <td id='"+i+objId+"' onMouseOver=\"resetStyle('"+objId+"');this.style.backgroundColor='#2c59aa';this.style.color='#ffffff';return true;\" onMouseOut=\"this.style.backgroundColor='#FFFFFF';this.style.color='#253449';return true;\" height='" + optionHeight + "' class='selectBoxOption' onMouseOver=\"this.className='selectBoxOptionOver'\" onMouseOut=\"this.className='selectBoxOption'\" onClick=\"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')\" style='cursor:hand;'>" + nowText + "</td>";
// selectInfo += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'/>";
selectInfo += " </tr>";
}
selectInfo += " </table>";
selectInfo += " </div>";
selectInfo += " </td>";
selectInfo += " </tr>";
selectInfo += "</table>";
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<count;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<l;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<l;i++)
{
if(document.getElementById(i+thisId).className=="selectBoxOptionOver" && i<l-1)
{
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;
}
}
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<l;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<l;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="<div id='" + index + "selectBoxs' style='position:absolute;z-index:100;display:none;' onMouseOut=\"setMousePosition('out')\" onkeydown=\"firstLetter('"+ index + "')\"></div>"
newSelect += "<table class='selectTable' cellpadding='0' cellspacing='1' border='0' onClick=\"viewOptionLayer('"+ index + "','"+ IsTask + "',true)\" style='cursor:hand;height:18px;line-height:18px;' onkeydown=\"firstLetter('"+ index + "')\">";
newSelect += " <tr>";
newSelect += " <td>";
newSelect += " <table class='selectTable' cellpadding='0' cellspacing='0' border='0' style='height:18px;border:1px solid #9BB8C8;'>";
if(IsTask)
{
newSelect += " <tr>";
newSelect += " <td><div id='" + index + "selectBoxSelectedValue' name='selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth-downArrowSrcWidth-3)+ "px;height:" + selectBoxHeight + "px;overflow:hidden;' onBlur=\"selectBoxBlur('" + index + "');ValueEditd(this)\" onchange='ValueEditd(this)'></div></td>";
}
else
{
newSelect += " <tr style='height:18px;line-height:17px;'>";
newSelect += " <td><div id='" + index + "selectBoxSelectedValue' name='selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth-downArrowSrcWidth-4)+ "px;overflow:hidden;' onBlur=\"selectBoxBlur('" + index + "');\"></div></td>";
}
newSelect += " <td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>";
newSelect += " </tr>";
newSelect += " </table>";
newSelect += " </td>";
newSelect += " </tr>";
newSelect += "</table>";
return newSelect ;
}
</script>

Javascript 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
详解iframe与frame的区别
Jan 13 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 #Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 #Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 #Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 #Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 #Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 #Javascript
Javascript String.replace的妙用
Sep 08 #Javascript
You might like
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
brook javascript框架介绍
2011/10/10 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
一个超级简单的python web程序
2014/09/11 Python
跟老齐学Python之print详解
2014/09/28 Python
pandas多级分组实现排序的方法
2018/04/20 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
总监职责范文
2013/11/09 职场文书
化工专业推荐信范文
2013/11/28 职场文书
安全责任书范文
2014/08/25 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
房屋产权证明书
2014/10/15 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
小学英语听课心得体会
2016/01/14 职场文书
AJAX学习笔记
2021/05/18 Javascript
python 爬取华为应用市场评论
2021/05/29 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android