一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能

来源：互联网发布：python requests get 编辑：程序博客网时间：2024/05/16 13:46

调用时可以这样：

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的对象

源代码：
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 ;
}