|
一個(gè)可輸入的下拉框的例子與大家交流
自己推銷： http://expert.csdn.net/Expert/TopicView1.asp?id=1812694 希望大家提出更好的改正意見(jiàn)阿！ http://webfx./dhtml/combobox/combo_demo.htm 我認(rèn)為關(guān)鍵要使用方便，同時(shí)可以用于動(dòng)態(tài)編寫（比如ASP、JSP、PHP等），這樣就可以按照select元素的一般設(shè)置方法來(lái)使用，現(xiàn)在我做了改進(jìn)，讓動(dòng)態(tài)加入的input元素繼承使用了select的onchange方法，這樣就更符合select元素的一般應(yīng)用。 sixi_fish(思溪的魚) ，你提供的這個(gè)，雖然做的很好，但要設(shè)置一個(gè)響應(yīng)事件，可能就不大好設(shè)了，同時(shí)全是腳本的操作，假如給一個(gè)不懂菜鳥使用，能懂嗎？再說(shuō)，往input輸入新值之后，一般應(yīng)用中，可沒(méi)有多少使用來(lái)添加到select中。問(wèn)題值得討論討論！ 學(xué)習(xí)中～～～～～ http://fason./code/form/select/editselect2.htm combo_demo.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>ComboBox Demo</title> <style> body {font-size:9pt;font-family:verdana;} button {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;} a {color:red;} a:hover {color:blue} </style> </head> <body> <script src="ComboBox.js"></script> <script> dm=new ComboBox("dm") dm.add( new ComboBoxItem("barge",1), new ComboBoxItem("benluc",2), new ComboBoxItem("benlieeeeck",3), new ComboBoxItem("taco",4) ) /* // generate 1000 more to test performance for (var i = 0; i < 100; i++ ) dm.add(new ComboBoxItem(String(i))); */ </script> <br><br><br> <button hidefocus onClick="alert(dm.value)">Show Value</button> <button hidefocus onClick="dm.add(new ComboBoxItem(window.prompt(‘Type in the text to add‘,‘‘),window.prompt(‘Type in a value to add‘,‘‘)))" >Add Item</button> <button hidefocus onClick="dm.remove(window.prompt(‘Type in an index to remove‘,‘‘))" >Remove Item</button> <br> <br> </body> </html> ComboBox.js /* * ComboBox * By Jared Nuzzolillo * * Updated by Erik Arvidsson * http://webfx./contact.html#erik * 2002-06-13 Fixed Mozilla support and improved build performance * */ Global_run_event_hook = true; Global_combo_array = new Array(); Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){self.status=‘Array_remove:invalid request-‘+dx;return false} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=this[i] } } this.length-=1 } function ComboBox_make() { var bt,nm; nm = this.name+"txt"; this.txtview = document.createElement("INPUT") this.txtview.type = "text"; this.txtview.name = nm; this.txtview.id = nm; this.txtview.className = "combo-input" this.view.appendChild(this.txtview); this.valcon = document.createElement("INPUT"); this.valcon.type = "hidden"; this.view.appendChild(this.valcon) var tmp = document.createElement("IMG"); tmp.src = "___"; tmp.style.width = "1px"; tmp.style.height = "0"; this.view.appendChild(tmp); var tmp = document.createElement("BUTTON"); tmp.appendChild(document.createTextNode(6)); tmp.className = "combo-button"; this.view.appendChild(tmp); tmp.onfocus = function () { this.blur(); }; tmp.onclick = new Function ("", this.name + ".toggle()"); } function ComboBox_choose(realval,txtval) { this.value = realval; var samstring = this.name+".view.childNodes[0].value=‘"+txtval+"‘" window.setTimeout(samstring,1) this.valcon.value = realval; } function ComboBox_mouseDown(e) { var obj,len,el,i; el = e.target ? e.target : e.srcElement; while (el.nodeType != 1) el = el.parentNode; var elcl = el.className; if(elcl.indexOf("combo-")!=0) { len=Global_combo_array.length for(i=0;i<len;i++) { curobj = Global_combo_array[i] if(curobj.opslist) { curobj.opslist.style.display=‘none‘ } } } } function ComboBox_handleKey(e) { var key,obj,eobj,el,strname; eobj = e; key = eobj.keyCode; el = e.target ? e.target : e.srcElement; while (el.nodeType != 1) el = el.parentNode; elcl = el.className if(elcl.indexOf("combo-")==0) { if(elcl.split("-")[1]=="input") { strname = el.id.split("txt")[0] obj = window[strname]; obj.expops.length=0 obj.update(); obj.build(obj.expops); if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}//empty else{obj.opslist.style.display=‘block‘;} obj.value = el.value; obj.valcon.value = el.value; } } } function ComboBox_update() { var opart,astr,alen,opln,i,boo; boo=false; opln = this.options.length astr = this.txtview.value.toLowerCase(); alen = astr.length if(alen==0) { for(i=0;i<opln;i++) { this.expops[this.expops.length]=this.options[i];boo=true; } } else { for(i=0;i<opln;i++) { opart=this.options[i].text.toLowerCase().substring(0,alen) if(astr==opart) { this.expops[this.expops.length]=this.options[i];boo=true; } } } if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")} } function ComboBox_remove(index) { this.options.remove(index) } function ComboBox_add() { var i,arglen; arglen=arguments.length for(i=0;i<arglen;i++) { this.options[this.options.length]=arguments[i] } } function ComboBox_build(arr) { var str,arrlen arrlen=arr.length; str = ‘<table class="combo-list-width" cellpadding=0 cellspacing=0>‘; var strs = new Array(arrlen); for(var i=0;i<arrlen;i++) { strs[i] = ‘<tr>‘ + ‘<td class="combo-item" onClick="‘+this.name+‘.choose(\‘‘+arr[i].value+‘\‘,\‘‘+arr[i].text+‘\‘);‘+this.name+‘.opslist.style.display=\‘none\‘;"‘ + ‘onMouseOver="this.className=\‘combo-hilite\‘;" onMouseOut="this.className=\‘combo-item\‘" > ‘+arr[i].text+‘ </td>‘ + ‘</tr>‘; } str = str + strs.join("") + ‘</table>‘ if(this.opslist){this.view.removeChild(this.opslist);} this.opslist = document.createElement("DIV") this.opslist.innerHTML=str; this.opslist.style.display=‘none‘; this.opslist.className = "combo-list"; this.opslist.onselectstart=returnFalse; this.view.appendChild(this.opslist); } function ComboBox_toggle() { if(this.opslist) { if(this.opslist.style.display=="block") { this.opslist.style.display="none" } else { this.update(); this.build(this.options); this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX this.opslist.style.display="block" } } else { this.update(); this.build(this.options); this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX this.opslist.style.display="block" } } function ComboBox() { if(arguments.length==0) { self.status="ComboBox invalid - no name arg" } this.name = arguments[0]; this.par = arguments[1]||document.body this.view = document.createElement("DIV"); this.view.style.position=‘a(chǎn)bsolute‘; this.options = new Array(); this.expops = new Array(); this.value = "" this.build = ComboBox_build this.make = ComboBox_make; this.choose = ComboBox_choose; this.add = ComboBox_add; this.toggle = ComboBox_toggle; this.update = ComboBox_update; this.remove = ComboBox_remove; this.make() this.txtview = this.view.childNodes[0] this.valcon = this.view.childNodes[1] this.par.appendChild(this.view) Global_combo_array[Global_combo_array.length]=this; if(Global_run_event_hook){ComboBox_init()} } ComboBox.prototype.COMBOBOXZINDEX = 1000 //change this if you must function ComboBox_init() { if (document.addEventListener) { document.addEventListener("keyup", ComboBox_handleKey, false ); document.addEventListener("mousedown", ComboBox_mouseDown, false ); } else if (document.attachEvent) { document.attachEvent("onkeyup", function () { ComboBox_handleKey(window.event); } ); document.attachEvent("onmousedown", function () { ComboBox_mouseDown(window.event); } ); } Global_run_event_hook = false; } function returnFalse(){return false} function ComboBoxItem(text,value) { this.text = text; this.value = value; } document.write(‘<link rel="STYLESHEET" type="text/css" href="ComboBox.css">‘) ComboBox.css .combo-button { cursor: hand; cursor: pointer; height: 20px; border: 1px solid rgb(120,172,255); padding: 0; background: rgb(234,242,255); width: 14px; vertical-align: baseline; font-size: 8pt; font-family: Webdings, Marlett; } .combo-hilite { cursor: hand; cursor: pointer; background: rgb(234,242,255); border: 1px solid rgb(120,172,255); color: black; font-family: verdana; font-size: 9pt; } .combo-item { cursor: hand; cursor: pointer; background: white; border: 1px solid white; color: black; font-family: verdana; font-size: 9pt; } .combo-input { border: 1px solid rgb(120,172,255) !important; width: 138px !important; vertical-align: baseline; } .combo-list table { ; width: 149px; } .combo-list { border: 1px solid black; background: white; padding: 1px; width: 149px; /* enable this if you want scroll bars height: 200px; overflow: auto; overflow-x: visible; overflow-y: auto; scrollbar-base-color: rgb(234,242,255); scrollbar-highlight-color: rgb(234,242,255); scrollbar-3dlight-color: rgb(120,172,255); scrollbar-darkshadow-color: rgb(120,172,255); scrollbar-shadow-color: rgb(234,242,255); scrollbar-face-color: rgb(234,242,255); scrollbar-track-color: white; scrollbar-arrow-color: black; */ } mark laola |
|
|
