javascript可输入的下拉列表

来源：互联网发布：js的设计模式编辑：程序博客网时间：2024/05/21 02:21

可输入的下拉列表用法,
1.在html中添加链接<link rel="STYLESHEET" type="text/css" href="ComboBox.css" />
2.在使用的地方添加如:<td id="modified" width="175px">
3.最后添加脚本代码:<script src=ComboBox.js></script><script language=javascript>
dm=new ComboBox("dm");
dm.add(
       new ComboBoxItem("barge","barge"),
       new ComboBoxItem("benluc","benluc"),
       new ComboBoxItem("benlieeeeck","benlieeeeck"),
       new ComboBoxItem("taco","taco")
      );</script>或者
<script src="ComboBox.js"></script>
<script>
dm=new ComboBox("dm");
<%System.Data.DataTable dtPro=DataAccess.dataSet("SELECT distinct(Project) FROM BudgetProject").Tables[0];
    for (int i = 0; i < dtPro.Rows.Count; i++){%>
          dm.add(new ComboBoxItem('<%=dtPro.Rows[i][0].ToString()%>','<%=dtPro.Rows[i][0].ToString()%>'));
<% } %> </script>
4.在<title>之间添加
<script language="javascript">
function changeToCS()
{
   document.getElementById("TxtSearch").value = dm.value;
}</script>
5.在c#中使用要在前台添加控件如:<input type="hidden" id="txtCombo" runat="server" />才能通过txtCombo.Value来调用控件的值.

**********************************combo.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.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_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()
{
    if(arguments.length==0)
    {
        self.status="ComboBox invalid - no name arg"
    }

    this.name     = arguments[0];
    //this.par      = arguments[1]||document.body
    this.par      = arguments[1]||document.getElementById("modified")
    this.view     = document.createElement("DIV");
    //this.view.style.position='absolute';
    this.view.style.position='absolute';
    this.view.style.pixelTop = 20;
    this.view.style.pixelLeft =15;

    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 returnFalse(){return false}

function ComboBoxItem(text,value)
{
this.text = text;
this.value = value;
}

//document.write('<link rel="STYLESHEET" type="text/css" href="ComboBox.css">')