一个模型: html:<!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"), new ComboBoxItem("benluc"), new ComboBoxItem("benlieeeeck"), new ComboBoxItem("taco") ) /* // 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> <br> <br> 列表框模型 </body> </html>
主要的是js: /* * ComboBox * By Jared Nuzzolillo * * Updated by Erik Arvidsson * http://webfx.eae.net/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";
楼主【zhoutaibo】截止到2008-06-23 21:52:46的历史汇总数据(不包括此帖):
发帖数:12 发帖分:470
结贴数:11 结贴分:450
未结数:1 未结分:20
结贴率:91.67 % 结分率:95.74 %
值得尊敬
<Head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义 select 原值
var oldValue,oldText;
//select下拉框的onkeydown事件,修改下拉框的值
function catch_keydown(sel)
{
switch(event.keyCode)
{
case 13: //回车键
event.returnValue = false;
break;
case 27: //Esc键
sel.options[sel.selectedIndex].text = oldText;
sel.options[sel.selectedIndex].value = oldValue;
event.returnValue = false;
break;
case 8: //空格健
var s = sel.options[sel.selectedIndex].text;
s = s.substr(0,s.length-1);
if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text)
{
sel.options[sel.selectedIndex].value=s;
sel.options[sel.selectedIndex].text=s;
}
event.returnValue = false;
break;
}
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}//select下拉框的onkeypress事件,修改下拉框的值
function catch_press(sel){
if(sel.selectedIndex>=0){
var s = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text)
{
sel.options[sel.selectedIndex].value=s;
sel.options[sel.selectedIndex].text=s;
}
event.returnValue = false;
if (!event.returnValue && sel.onchange)
sel.onchange(sel)
}
}//select下拉框的onfocus事件,保存下拉框原来的值
function catch_focus(sel) {
oldText = sel.options[sel.selectedIndex].value;
oldValue = sel.options[sel.selectedIndex].value;
}//恢复select下拉列表当前选中的值
function LoadSelect(obj,value)
{
for (var i=0; i< obj.options.length; i++)
if (obj.options[i].value == value)
{
obj.selectedIndex = i;
break;
}
}//select 选择框鼠标上移时提示选择的内容
function selMouseOver(obj)
{
with (document.all.div_hint)
{
innerText = obj.options[obj.selectedIndex].text;
if (innerText.length > 0)
{
innerText = " " + innerText + " ";
style.display = "block";
style.left = event.clientX + 16;
style.top = event.clientY;
}
}
}//select 选择框鼠标移开时消失
function selMouseOut(obj)
{
with (document.all.div_hint)
{
style.display = "none"
}
}
//-->
</SCRIPT>
</Head>
<Body>
<!--调用-->
<select style='width:130px;z-index:-1' name='tmpSel' onmouseover=selMouseOver(this) onmouseout=selMouseOut(this) onkeydown=catch_keydown(this) onkeypress=catch_press(this) onfocus=catch_focus(this)>
<option value=''></option>
</select><!--提示块-->
<div id=div_hint style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
</Body>
</Html>
<html>
<head>
<title>添加Option对象</title>
<script language="javascript">
// 添加选项
function addOption(pos){
var objSelect = document.myForm.mySelect;
// 取得字段值
var strName = document.myForm.myOptionName.value;
var strvalue = document.myForm.myOptionvalue.value;
// 建立Option对象
var objOption = new Option(strName,strvalue);
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
} </script>
</head>
<body> <hr>
<form name="myForm">
<select name="mySelect">
<option value="第一名" Selected>中国</option>
<option value="第二名">日本</option>
<option value="第三名">美国</option>
<option value="第四名">英国</option>
</select>
<br>选项名称 : <input type="text" name="myOptionName" value="英国"><br>
选项的值 : <input type="text" name="myOptionvalue" value="第四名">
<input type="button" onclick="addOption(-1)" value="添加"> </form>
</body>
</html>
html:<!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"),
new ComboBoxItem("benluc"),
new ComboBoxItem("benlieeeeck"),
new ComboBoxItem("taco")
)
/*
// 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>
<br>
<br>
列表框模型
</body>
</html>
/*
* ComboBox
* By Jared Nuzzolillo
*
* Updated by Erik Arvidsson
* http://webfx.eae.net/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='absolute';
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 mustfunction 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;
}
*/
function ComboBoxItem(text)
{
this.text = text;
this.value = text;
}
document.write('<link rel="STYLESHEET" type="text/css" href="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 {
table-layout: fixed;
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;
*/
}