作者：marvellous
本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:
select,option {background-color:lime} 1 2 不是一样的嘛 select,option {background-color:lime;font-family:华文行楷;color:red;} 上海 北京 香港
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
日久天长之后,人们对select要求高了,要修一修边幅:
11111 111111 111111111111 2222222 333333 4444444 q Untitled Document .table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px} .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;} .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px} .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;} .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold; } .seldiv{ position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000; SCROLLBAR-FACE-COLOR: #d0dff7; SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;} document.onclick=hiddenDiv; function getDivCount() { var arr=document.all; re=0; for (i=0;i 1) { el.size = size; dropdown.style.zIndex = 0; initSized(el); } else { el.size = 1; dropdown.style.zIndex = 99; if (dropdown.offsetHeight > 200) { dropdown.style.height = "200"; dropdown.style.overflow = "auto"; } } } highlightSelected(el,true); } function int_remove(el,i) { if (el.options[i] != null) el.options[i].outerHTML = ""; } function int_add(el, e, i) { var html = ""; if (e.text != null) html += e.text; html += "" if ((i == null) || (i >= el.options.length)) i = el.options.length-1; el.options[i].insertAdjacentHTML("AfterEnd", html); } function initSized(el) { var h = 0; el.children[0].style.display = "none"; dropdown = el.children[1]; dropdown.style.visibility = "visible"; if (dropdown.children.length > el.size) { dropdown.style.overflow = "auto"; for (var i=0; i1)mmenutable.style.pixelTop=y+=(ym-y)/5;else mmenutable.style.pixelTop=y=ym;if(Math.abs(xm-x)>1)mmenutable.style.pixelLeft=x+=(xm-x)/5;else mmenutable.style.pixelLeft=x=xm;setTimeout("mcheckLocation()",10);} mpmenu1=new mMenu('File','','self','','','',''); mpmenu1.addItem(new mMenuItem('New','javascript:alert("New")','self',false,'New','','','','')); mpmenu1.addItem(new mMenuItem('Open','javascript:alert("Open")','self',false,'Open','','','','')); mpmenu1.addItem(new mMenuItem('Save','javascript:alert("Save")','self',false,'Save','','','','')); mpmenu1.addItem(new mMenuItem(null,null,null,true)); mpmenu1.addItem(new mMenuItem('Exit','javascript:alert("Exit")','self',false,'Exit','','','','')); mpmenu2=new mMenu('Edit','','self','','','',''); mpmenu2.addItem(new mMenuItem('Undo','javascript:alert("Undo")','self',false,'Undo','','','','')); mpmenu2.addItem(new mMenuItem('Forward','javascript:alert("Forward")','self',false,'Forward','','','','')); mpmenu2.addItem(new mMenuItem(null,null,null,true)); mpmenu2.addItem(new mMenuItem('Copy','javascript:alert("Copy")','self',false,'Copy','','','','')); mpmenu2.addItem(new mMenuItem('Paste','javascript:alert("Paste")','self',false,'Paste','','','','')); mpmenu3=new mMenu('Favorites','','self','','','',''); mpmenu3.addItem(new mMenuItem('MyHomepage','http://www.KnifeSoft.com','blank',false,'Visit My Homepage','','','','')); mpmenu3.addItem(new mMenuItem('Yahoo','http://www.yahoo.com','blank',false,'Visit Yahoo','','','','')); mpmenu4=new mMenu('Help','','self','','','',''); mpmenu4.addItem(new mMenuItem('Contect','javascript:alert("Contect")','self',false,'Contect','','','','')); mpmenu4.addItem(new mMenuItem('Sendmeanemail','mailto:support@knifesoft.com','self',false,'Send me an email.','','','','')); mpmenu4.addItem(new mMenuItem(null,null,null,true)); mpmenu4.addItem(new mMenuItem('About','javascript:alert("About")','self',false,'About WebMenuShop','','','','')); mpmenu4=new mMenu('KnifeSoft','http://www.knifesoft.com','self','','','',''); mwritetodocument(); mcheckLocation(); 产品快速导航 多媒体产品 DLP数字光显背投 LCD液晶电视 数字高清背投 PDP等离子电视 CRT高清彩电 酒店电视 乐华彩电 视盘机 监视器 电视墙 通讯产品 手机 电话机 网络设备 宽带产品 数码产品 家用电脑 商用电脑 笔记本电脑 DV产品 MP3播放器 MP4播放器 家电产品 电冰箱 洗衣机 空调 中央空调 电饭煲 电磁炉 电风扇 饮水机 电暖器 净水器 烧烤炉 电气产品 开关插座 照明产品 工业电器 智能楼宇 部品产品 集成电路 高频头 电池 文化产品 美卡音像 TCL光盘
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
后来发展到其文字内容可以增、删、编、改，即可以编辑：
EditSelect function isIE(){ a=navigator.appVersion.split(";") b=a[1].split(" ") return parseFloat(b[2]) } if (isIE()combo.height) { vDiv.style.pixelHeight=combo.height vDivHtml.style.pixelHeight=combo.height } else { vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2 } } vDivHtml.scrollTop=0 if (redge