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

javascript五图轮播切换实用版

Aug 17 Javascript

JavaScript Math.floor方法(对数值向下取整)

Jan 09 Javascript

Angular中的Promise对象($q介绍)

Mar 03 Javascript

JQuery调用绑定click事件的3种写法

Mar 28 Javascript

JS实现左右拖动改变内容显示区域大小的方法

Oct 13 Javascript

JavaScript监听手机物理返回键的两种解决方法

Aug 14 Javascript

Vue 2.5.2下axios + express 本地请求404的解决方法

Feb 21 Javascript

Vue CLI3 如何支持less的方法示例

Aug 29 Javascript

jQuery实现的中英文切换功能示例

Jan 11 jQuery

详解基于webpack&gettext的前端多语言方案

Jan 29 Javascript

Openlayers实现地图全屏显示

Sep 28 Javascript

Vue实现导入Excel功能步骤详解

Jul 03 Vue.js

用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