一个用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 相关文章推荐
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Ajax基础知识详解
Feb 17 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 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 session 检测和注销
2009/03/16 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
angular十大常见问题
2017/03/07 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python实现身份证号码解析
2015/09/01 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python File(文件) 方法整理
2019/02/18 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
关于赌博的检讨书
2014/01/24 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
泰山导游词
2015/02/02 职场文书
高校教师个人总结
2015/02/10 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
湘江北去观后感
2015/06/15 职场文书