一個用javascript寫的select支援上下鍵、首字母篩選以及回車取值的功能
呼叫時可以這樣：
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 settingValue(thisId,thisString) {
var objId = thisId;
var valueString = thisString;
var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");
if (selectedArea) {
if(navigator.appName.indexOf("Explorer") > -1){
selectedArea.innerText = valueString;
}
else{
selectedArea.textContent = valueString;
}
}
}
var l=0;
//顯示下拉框中的值
function viewOptionLayer(thisId,Istask,flag) {
var objId = thisId;
var selectInfo="";
var optionHeight = 18; // 高
var optionMaxNum = 7; //
var optionInnerLayerHeight = "";
var selectBoxWidth =130;
var selectBoxHeight =17;
l=userList.Rows.length;
var optionLayer = document.getElementById(objId+"selectBoxs");
if(optionLayer.innerHTML=="")
{
if (l > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";
selectInfo = "<table class='selectTable' id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;'>";
if(Istask=="true")
{
selectInfo += " <tr>";
selectInfo += " <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=/"hideOptionLayer('"+ objId + "')/"></td>";
selectInfo += " </tr>";
selectInfo += " <tr>";
selectInfo += " <td style='height:2px;overflow:hidden;'></td>";
selectInfo += " </tr>";
}
else
{
selectInfo += " <tr style='height:24px;'>";
selectInfo += " <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=/"hideOptionLayer('"+ objId + "')/"></td>";
selectInfo += " </tr>";
}
selectInfo += " <tr style='height:17px;line-height:17px;border:none;'>";
selectInfo += " <td>";
selectInfo += " <div id='"+objId+"viewOptions' class='selectBoxOptionInnerLayer' style='width:" + selectBoxWidth + "px;" + optionInnerLayerHeight + "'>";
selectInfo += " <table class='selectTable' cellpadding='0' cellspacing='0' border='0' width='98%'>";
for (var i=0 ; i < l ; i++)
{
var nowValue = userList.Rows[i][userList.Columns[0].Name];
var nowText = userList.Rows[i][userList.Columns[0].Name];
if(Istask=="true")
{
selectInfo += " <tr>";
}
else
{
selectInfo += " <tr style='height:17px;line-height:17px; border:none;'>";
}
selectInfo += " <td id='"+i+objId+"' onMouseOver=/"resetStyle('"+objId+"');this.style.backgroundColor='#2c59aa';this.style.color='#ffffff';return true;/" onMouseOut=/"this.style.backgroundColor='#FFFFFF';this.style.color='#253449';return true;/" height='" + optionHeight + "' class='selectBoxOption' onMouseOver=/"this.className='selectBoxOptionOver'/" onMouseOut=/"this.className='selectBoxOption'/" onClick=/"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')/" style='cursor:hand;'>" + nowText + "</td>";
// selectInfo += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'/>";
selectInfo += " </tr>";
}
selectInfo += " </table>";
selectInfo += " </div>";
selectInfo += " </td>";
selectInfo += " </tr>";
selectInfo += "</table>";
optionLayer.innerHTML=selectInfo;
}
if (flag && optionLayer.style.display=="none"){ optionLayer.style.display = "";optionLayer.focus();}
else
{
optionLayer.style.display = "none";
if(document.getElementById("level"))
{
document.getElementById("level").style.display="";
}
if(document.getElementById("priority"))
{
document.getElementById("priority").style.display="";
}
}
if(!flag){optionLayer.style.display = "";optionLayer.focus();}
for(var i=0;i<count;i++)
{
if(document.getElementById("select"+i+""+"viewOptions"))
{
document.getElementById("select"+i+""+"viewOptions").style.display="none";
}
}
document.getElementById(objId+"viewOptions").style.display="";
if(document.getElementById("level"))
{
document.getElementById("level").style.display="none";
}
if(document.getElementById("priority"))
{
document.getElementById("priority").style.display="none";
}
nowOpenedSelectBox = objId;
setMousePosition("inBox");
}
//支援首字母篩選、回車鍵取值、上下鍵選值功能
function firstLetter(thisId){
var count=0;
var selectedVal="";
if(document.getElementById(thisId+"viewOptions").style.display=="")
{
document.getElementById(thisId+"viewOptions").focus();
var asciiCode=String.fromCharCode(event.keyCode).toLowerCase();
var selectValue="";
if(event.keyCode==38)
{
for(var i=0;i<l;i++)
{
if(document.getElementById(i+thisId).className=="selectBoxOptionOver" && i>0)
{
document.getElementById(i+thisId).style.backgroundColor='#ffffff';
document.getElementById(i+thisId).style.color='#253449';
document.getElementById(i+thisId).className='selectBoxOption';
document.getElementById((i-1)+thisId).style.backgroundColor='#2c59aa';
document.getElementById((i-1)+thisId).style.color='#ffffff';
document.getElementById((i-1)+thisId).className='selectBoxOptionOver';
document.getElementById(thisId+"viewOptions").scrollTop= (i-1)*20;
count=1;
break;
}
}
if(count==0)
{
document.getElementById((l-1)+thisId).style.backgroundColor='#2c59aa';
document.getElementById((l-1)+thisId).style.color='#ffffff';
document.getElementById((l-1)+thisId).className='selectBoxOptionOver';
}
}
if(event.keyCode==40)
{
for(var i=0;i<l;i++)
{
if(document.getElementById(i+thisId).className=="selectBoxOptionOver" && i<l-1)
{
document.getElementById(i+thisId).style.backgroundColor='#ffffff';
document.getElementById(i+thisId).style.color='#253449';
document.getElementById(i+thisId).className='selectBoxOption';
document.getElementById((i+1)+thisId).style.backgroundColor='#2c59aa';
document.getElementById((i+1)+thisId).style.color='#ffffff';
document.getElementById((i+1)+thisId).className='selectBoxOptionOver';
if(i>10)
{
document.getElementById(thisId+"viewOptions").scrollTop= (i+1)*19;
}
else
{
document.getElementById(thisId+"viewOptions").scrollTop= (i+1)*10;
}
count=1;
break;
}
}
if(count==0)
{
document.getElementById(0+thisId).style.backgroundColor='#2c59aa';
document.getElementById(0+thisId).style.color='#ffffff';
document.getElementById(0+thisId).className='selectBoxOptionOver';
}
}
if(event.keyCode==13)
{
for(var i=0;i<l;i++)
{
if(document.getElementById(i+thisId).className=="selectBoxOptionOver")
{
selectedVal=document.getElementById(i+thisId).innerHTML;
var sourceObj = $(thisId);
hideOptionLayer(thisId);
if (sourceObj) sourceObj.value = selectedVal;
settingValue(thisId,selectedVal);
selectBoxFocus(thisId);
if (sourceObj.onchange) sourceObj.onchange();
document.getElementById(thisId+"viewOptions").style.display="none";
if(document.getElementById("level"))
{
document.getElementById("level").style.display="";
}
if(document.getElementById("priority"))
{
document.getElementById("priority").style.display="";
}
break;
}
}
}
for(var i=0 ; i < l ; i++)
{
selectValue=document.getElementById(i+thisId).innerHTML;
if(asciiCode==selectValue.substring(0,1))
{
resetStyle(thisId);
document.getElementById(i+thisId).style.backgroundColor='#2c59aa';
document.getElementById(i+thisId).style.color='#ffffff';
document.getElementById(i+thisId).className='selectBoxOptionOver';
document.getElementById(thisId+"viewOptions").scrollTop= i*19;
break;
}
}
}
}
//清除被選中的下拉列表值的樣式
function resetStyle(thisId){
for(var i=0;i<l;i++)
{
document.getElementById(i+thisId).style.backgroundColor='#ffffff';
document.getElementById(i+thisId).style.color='#253449';
document.getElementById(i+thisId).className='selectBoxOption';
}
}
//隱藏下拉框
function hideOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+"selectBoxs");
if (optionLayer) optionLayer.style.display = "none";
if(document.getElementById("level"))
{
document.getElementById("level").style.display="";
}
if(document.getElementById("priority"))
{
document.getElementById("priority").style.display="";
}
}
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 hiddenOptions(thisId){
document.getElementById(thisId+"viewOptions").style.display="none";
if(document.getElementById("level"))
{
document.getElementById("level").style.display="";
}
if(document.getElementById("priority"))
{
document.getElementById("priority").style.display="";
}
}
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 ;
}
相關推薦
一個用javascript寫的select支援上下鍵、首字母篩選以及回車取值的功能
呼叫時可以這樣： 1，tempStr=GetNewSelectStr(dataTable.value,"select"+rowIndex,true);2,makeSelectBox("select"+rowIndex,tempStr,value,obj); tempStr－這
用JavaScript寫一個簡單的計算器
res scroll ref 簡單的 精度 arguments alt inf create 本文使用js實現了一個簡單的加、減、乘、除計算器。 以下是css部分代碼： *{ padding:0; margin:0; color: #424242;
【譯】用JavaScript寫一個區塊鏈
幾乎每個人都聽說過像比特幣和以太幣這樣的加密貨幣，但是隻有極少數人懂得隱藏在它們背後的技術。在這篇部落格中，我將會用JavaScript來建立一個簡單的區塊鏈來演示它們的內部究竟是如何工作的。我將會稱之為SavjeeCoin！ 全文分為三個部分： part1：實現一個基本的區塊鏈
怎麼用JavaScript寫一個區塊鏈？
幾乎所有語言都可以編寫區塊鏈開發程式。那麼如何用JavaScript寫一個區塊鏈？以下我將要用JavaScript來建立1個簡單的區塊鏈來演示它們的內部到底是怎樣工作的。我將會稱作SavjeeCoin！ 區塊鏈是由一個個所有人能夠訪問的區塊構成的公共資料庫。這好像沒有什麼特別的，不過它們有個有意
怎麽用JavaScript寫一個區塊鏈？
再次 his 實現 鏈接 turn 引入 數組 alc 保持 幾乎所有語言都可以編寫區塊鏈開發程序。那麽如何用JavaScript寫一個區塊鏈？以下我將要用JavaScript來創建1個簡單的區塊鏈來演示它們的內部到底是怎樣工作的。我將會稱作SavjeeCoin！
用 JavaScript 寫一個 X86 模擬器
來龍去脈 像一些沒有計算機背景的人一樣，我總是想要正確地瞭解底層是如何工作的，並在上面花費了大量的精力。 在學習過程中，我得到《從頭開始學習程式設計》這本書，但一直都沒有讀，直到在一次 飛往巴西的 11 個小時航班上，我才去閱讀它，看上去它是一個不錯的開始。 我很喜
用javascript寫一個函式，作用是去除字串前後空格
<html> <head></head> <body> <script> function trim(str){ return str.replace(/(^\s*)||(\s*$)/g,""
用javascript寫一個顯示時間差 幾分鐘前 幾小時前 幾天前 幾周前 大於一個月顯示日期
window.onload = function(){ var show_times = $(".times span"); for(var i=0;i<show_times.length
用javascript寫計算器
一位 先來 itl else 對象 alt img 技術 value 本人新手，如果有什麽不足的地方，希望可以得到指點 今天嘗試用javascript寫一個計算器 首先把計算器的按鈕做出來，用button做好了，這樣可以不用設置太多的樣式 <button value
你需要實現一個高效的緩存，它允許多個用戶讀，但只允許一個用戶寫
讀寫鎖思路：java.util.concurrent.locks包下面ReadWriteLock接口,該接口下面的實現類ReentrantReadWriteLock維護了兩個鎖讀鎖和解鎖，可用該類實現這個功能，很簡單import java.util.Date; import java.util.concurr
一個用css寫出來的下拉菜單
會員 col href splay hover style 個人 陰影 oat 1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuan
一個用JavaScript生成思維導圖(mindmap)的github repo
javascrip orf mark UNC 掃描 java cimage 簡單 發現 github 地址：https://github.com/dundalek/markmap 作者的readme寫得很簡單。 今天有同事問作者提供的例子到底怎麽跑。這裏我就寫一個更詳細的步
一個用Go寫的叢集資料分發工具
背景 在工作中遇到大資料（20G左右）批量部署的問題，剛開始通過scp或者rsync限速80M序列分發，大約每臺機器的耗時為5分鐘，極大的增加了大批量部署的時間和難度，各種難產。於是作者就花了一天多的時間做了個簡易的傳輸工具，現在還不太成熟，希望對大家有啟發，更希望大家多多提建議。 思路
用JavaScript寫的動態表格
實現的功能有Table表格新增，刪除。輸入，刪除的全選，單行刪除。 HTML程式碼部分 <body> <form> <table border="1" align="center" width="300px" height="200"> &
原生JavaScript寫select下拉選擇後跳轉頁面
1 <select name="molsel_oprate" onchange="javascript:var obj = event.target; var index = obj.selectedIndex; $(this).val('default');var linkurl = obj.
一個用python寫的websocket服務端
由於要在頁面上呼叫後臺的一個shell程式，但是這個shell執行時間很長，如果非同步獲取shell的輸出？而不必漫長的等待shell執行完畢才會一下把資料全部輸出？ 我們知道原生的http協議不可能完成這個要求，除非你把輸出更新到一個文本里，然後用js倫詢去取，這不扯淡嗎
用javascript寫星際飛機大戰遊戲
在github裡看到了個不錯的指令碼遊戲，決定親自動手來寫，效果如下 下面是程式碼的思路分享 把整個程式碼理解消化確實不容易，但是如果你堅持看完相信你一定會有收穫 如果沒興趣可以直接點選下面的連結 複製程式碼 開玩： 1丶首先準備好素材 遊戲的元素有：
用javascript 實現網頁滑鼠右鍵彈出選單功能
工作中需要實現在網頁上點右鍵彈出簡單選單的功能，在網上找了一些例子，都比較複雜，其實我這邊只需要實現簡單的選單功能，兩個選項，使用者點選了以後實現一些簡單的ajax功能。於是根據思路，用DOM建立一個選單層，每個選單選項有自己的onclick方法，啟用相應的ajax功能，然後
polaris: 一個用go實現的支援restful的web框架
介紹 polaris是一個用go實現的支援restful的web框架，主要參考tornado進行設計。 雖然在go裡面搭建一個http server非常的簡單，這裡強烈推薦gorilla，但並沒有很好的對restful模型進行支援。考察了很多開源實現，我決定還是重新造
用javascript寫九九正反金字塔乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九九乘法表金字塔</title> &l