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

jquery mobile changepage的三种传参方法介绍

Sep 13 Javascript

一个JavaScript处理textarea中的字符成每一行实例

Sep 22 Javascript

基于jquery实现三级下拉菜单

May 10 Javascript

浅析angularJS中的ui-router和ng-grid模块

May 20 Javascript

探索Vue高阶组件的使用

Jan 08 Javascript

Vue的路由动态重定向和导航守卫实例

Mar 17 Javascript

解决bootstrap中下拉菜单点击后不关闭的问题

Aug 10 Javascript

微信小程序多音频播放进度条问题

Aug 28 Javascript

vue中使用input[type="file"]实现文件上传功能

Sep 10 Javascript

基于Vue-cli快速搭建项目的完整步骤

Nov 03 Javascript

JS栈stack类的实现与使用方法示例

Jan 31 Javascript

vue @click.native 绑定原生点击事件

Apr 22 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