编程 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中利用数组实现的循环队列代码

Jan 24 Javascript

jQuery Tips 为AJAX回调函数传递额外参数的方法

Dec 28 Javascript

利用百度地图JSAPI生成h7n9禽流感分布图实现代码

Apr 15 Javascript

使用JQUERY进行后台页面布局控制DIV实现左右式

Jan 07 Javascript

jQuery 滑动方法slideDown向下滑动元素

Jan 16 Javascript

javascript里绝对用的上的字符分割函数总结

Jul 31 Javascript

Vue全局分页组件的实现代码

Aug 10 Javascript

微信小程序云开发实现增删改查功能

May 17 Javascript

vue-cli 项目打包完成后运行文件路径报错问题

Jul 19 Javascript

详解JavaScript 高阶函数

Sep 14 Javascript

vue实现简单数据双向绑定

Apr 28 Vue.js

详解vue中v-for的key唯一性

May 15 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