一个用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的new操作符(一)
Dec 25 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
js实现随机点名器精简版
Jun 29 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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
基于文本的搜索
2006/10/09 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
初中地理教学反思
2014/01/11 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
电台实习生求职信
2014/02/25 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
找工作求职信
2014/07/07 职场文书
滞留工资返还协议书
2014/10/19 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
放假通知范文
2015/04/14 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis