下拉列表select 能不能象vb那样既可以选择一个值,又可以手工输入,因为列表中的值是不够的

这里有个是以前的一位朋友在csdn上发表的：
------------ComboBox_API_download.htm-----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ComboBox API</title>
</head><body>
<body>
<div id="contentDiv">
<div class="webfx-main-body">

<h2>ComboBox</h2><p>This object type creates a windows-like combobox, a bit like the address bar of Internet Explorer.</p><h3>Constructor</h3><pre>new ComboBox(sName[,oContainer])</pre><table >
<thead><tr>
<td>Name</td>
<td>Description</td>
</tr></thead>
<tbody>
<tr>
<td>sName</td>
<td valign="top">A string equal to the variable you set the ComboBox to<br>
     ( <code>sName=new ComboBox("sName")</code> ).</td>
</tr>
<tr>
<td valign="top">oContainer</td>
<td>A reference to the object that should contain the <br>
     ComboBox. This eliminates a nasty bug I was running into<br>
     with the appendChild method. This parameter is optional,<br>
     if you don't specify one, the document.body is used as <br>
     the parent.
</td>
</tr>
</tbody>
</table><h3>Properties</h3><table >
<thead><tr>
<td>Name</td>
<td>Description</td>
</tr></thead>
<tbody>
<tr>
<td>view</td>
<td valign="top">Returns a referrence to the actual HTML element (div) of<br>
     the ComboBox.</td>
</tr>
<tr>
<td valign="top">value</td>
<td>Returns a string that is the value of the ComboBox.</td>
</tr>
<tr>
<td>txtview</td>
<td valign="top">Returns a referrence to the actual HTML input text box of the<br>
    ComboBox.</td>
</tr>
<tr>
<td>valcon</td>
<td valign="top">Returns a referrence to the actual HTML hidden input field of<br>
    the ComboBox (which stores the real value).</td>
</tr>
</tbody>
</table><h3>Methods</h3><table >
<thead><tr>
<td>Name</td>
<td>Description</td>
</tr></thead>
<tbody>
<tr>
<td>add(oCmBxIm)</td>
<td>Adds one or more ComboBoxItem's to the ComboBox.</td>
</tr>
<tr>
<td>toggle()</td>
<td>Expand/collapses the ComboBox options list.</td>
</tr>
<tr>
<td>choose(text,value)</td>
<td>Chooses a new value for the ComboBox and text for<br> the textbox.</td>
</tr>
<tr>
<td>remove(iIndex)</td>
<td valign="top">Removes an index option at the specified index from  <br>the full
    ComboBox list.</td>
</tr>
</tbody>
</table><h2>ComboBoxItem</h2><p>This object type creates an item for the ComboBox object above.</p><h3>Constructor</h3><pre>new ComboBoxItem(sText,sValue)</pre><table >
<thead><tr>
<td>Name</td>
<td>Description</td>
</tr></thead>
<tbody>
<tr>
<td>sText</td>
<td>A string to show the user for the list item.</td>
</tr>
<tr>
<td>sValue</td>
<td>A string to be the actual value of the list item.</td>
</tr>
</tbody>
</table><h3>Properties</h3><table >
<thead><tr>
<td>Name</td>
<td>Description</td>
</tr></thead>
<tbody>
<tr>
<td>text</td>
<td>A string to show the user for the list item.</td>
</tr>
<tr>
<td>value</td>
<td>A string to be the actual value of the list item.</td>
</tr>
</tbody>
</table><h3>Methods</h3><table >
<thead><tr>
<td>Name</td>
<td>Description</td>
</tr></thead>
<tbody>
<tr>
<td colspan="2">There are no methods for this object.</td>
</tr>
</tbody>
</table><p class="author">Author: Jared Nuzzolillo</p></body>
</html>

----------------ComboBox.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";

    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;
}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 {
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;
*/
}--------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>

上面错了，不是select 而是combox，不过我想原理应该差不多。

调试易

下拉列表select 能不能象vb那样既可以选择一个值,又可以手工输入,因为列表中的值是不够的

解决方案 »