编程 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 相关文章推荐

一个js的tab切换效果代码[代码分离]

Apr 11 Javascript

JavaScript中使用构造函数实现继承的代码

Aug 12 Javascript

详解JavaScript函数

Dec 01 Javascript

第四篇Bootstrap网格系统偏移列和嵌套列

Jun 21 Javascript

Bootstrap的fileinput插件实现多文件上传的方法

Sep 05 Javascript

JavaScript实现横线提示输入验证码随输入验证码输入消失的方法

Sep 24 Javascript

JavaScript 对象详细整理总结

Sep 29 Javascript

VueJS如何引入css或者less文件的一些坑

Apr 25 Javascript

详解Vue-cli webpack移动端自动化构建rem问题

Apr 07 Javascript

详解如何构建一个Angular6的第三方npm包

Sep 07 Javascript

解决vue.js提交数组时出现数组下标的问题

Nov 05 Javascript

JS运算符优先级与表达式示例详解

Sep 04 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