编程 Javascript

一个用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 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 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写的select支持上下键、首字母筛选以及回车取值的功能

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

解密效果

Jun 23 Javascript

利用jQuery的$.event.fix函数统一浏览器event事件处理

Dec 21 Javascript

jQuery 跨域访问解决原理案例详解

Jul 09 Javascript

js 声明数组和向数组中添加对象变量的简单实例

Jul 28 Javascript

原生js实现网页顶部自动下拉/收缩广告效果

Jan 20 Javascript

使用gulp搭建本地服务器并实现模拟ajax

Apr 05 Javascript

聊聊JS动画库 Velocity.js的使用

Mar 13 Javascript

Vue路由之JWT身份认证的实现方法

Aug 26 Javascript

浅谈layui数据表格判断问题(加入表单元素),设置单元格样式

Oct 26 Javascript

vue项目实现图片上传功能

Dec 23 Javascript

ES6学习笔记之let与const用法实例分析

Jan 22 Javascript

基于elementUI竖向表格、和并列的案例

Oct 26 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