一个下拉列表框,可以编辑,在编辑的时候,下拉列表框会罗列出与所打的字相关联的选项.
比如下拉列表框的选项有:A1,A2,A3,A4,A5,B1,B2,B3,B4,当我在下拉列表框中输入A时,下拉列表框只有前五个选项,请高手们指点,提供代码,谢谢,要是分不够,我再加.
比如下拉列表框的选项有:A1,A2,A3,A4,A5,B1,B2,B3,B4,当我在下拉列表框中输入A时,下拉列表框只有前五个选项,请高手们指点,提供代码,谢谢,要是分不够,我再加.
比如下拉列表框的选项有:A1,A2,A3,A4,A5,B1,B2,B3,B4,当我在下拉列表框中输入A时,下拉列表框只有前五个选项,请高手们指点,提供代码,谢谢,要是分不够,我再加.
*****************************************************************************
欢迎使用CSDN论坛专用阅读器 : CSDN Reader(附全部源代码) http://www.cnblogs.com/feiyun0112/archive/2006/09/20/509783.html
设置要显示列出的元素为Combobox.Items就可以自动的来实现了。
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript">
<!--
var selectionBlack = '#eeeeee';//下拉框的背景色
var highter = 'yellow'//被選中的選項的背景色
function OpenSelection()
{
var divSelect = document.getElementById('divSelect');
ShowSelection(divSelect);
for (var i = 0; i < selection.length; i++)
{
var divOption = AddOption(selection[i], divSelect.style.width);
divSelect.appendChild(divOption);
}
}
//顯示下拉框
function ShowSelection(divSelect)
{
var ddl = document.getElementById('ddlTest'); divSelect.style.display = 'block';
divSelect.innerHTML = '';
divSelect.style.zIndex = 3;
divSelect.style.backgroundColor = selectionBlack;
divSelect.style.left = ddl.offsetLeft;
divSelect.style.top = ddl.offsetTop + ddl.offsetHeight - 2;
divSelect.style.width = ddl.offsetWidth;
}
//隱藏下拉框
function HideSelection(divSelect)
{
divSelect.innerHTML = '';
divSelect.style.zIndex = 1;
divSelect.style.display = 'none';
}
//添加選項
function AddOption(optionText, width)
{
var divOption = document.createElement('div');
divOption.innerHTML = optionText;
divOption.style.cursor = 'default';
divOption.style.width = width;
divOption.onclick = Select;
divOption.onmouseenter = Hight;
divOption.onmouseout = ReloadColor;
return divOption;
}
//選取需要的選項
function Select()
{
document.getElementById('Text1').value = event.srcElement.innerText;
var divSelect = document.getElementById('divSelect');
HideSelection(divSelect);
}
//加亮現在選擇的選項
function Hight()
{
var div = event.srcElement;
div.style.backgroundColor = highter;
}
//恢復加亮的選項
function ReloadColor()
{
event.srcElement.style.backgroundColor = selectionBlack;
}
//根據輸入加載需要的選項
function ChangeSelection()
{
var text = event.srcElement.value;
var divSelect = document.getElementById('divSelect');
ShowSelection(divSelect);
for (var i = 0; i < selection.length; i++)
{
if (selection[i].indexOf(text) != -1)
{
var divOption = AddOption(selection[i], divSelect.style.width);
divSelect.appendChild(divOption);
}
}
if (!divSelect.hasChildNodes())
{
HideSelection(divSelect);
}
}
function Hide()
{
var divSelect = document.getElementById('divSelect');
HideSelection(divSelect);
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="z-index:1; position:absolute" id='divSelect'></div>
<span id="ddlTest" style="width:150px; vertical-align:top; background-color:ButtonShadow; cursor:default; position:relative; z-index:2" onclick="OpenSelection()" onfocusout="Hide()">
<input type="text" id="Text1" style="width:145px; position:relative; z-index:2" onkeyup="ChangeSelection()" />
v
</span>
<p>jflskdjfl<br />
djflsjifej<br />
dfkjljfillllllllllllllllllei<br />
dfdfdlfkji</p>
</form>
</body>
</html>
這個是aspx.cs裡的代碼using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Text;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;public partial class EditDropDownList_EditDDL : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.SetSelection();
} /// <summary>
/// 存儲全部的選項到Array中
/// </summary>
private void SetSelection()
{
List<string> list = new List<string>();
list.Add("A1");
list.Add("A2");
list.Add("A3");
list.Add("A4");
list.Add("A5");
list.Add("B1");
list.Add("B2");
list.Add("B3");
list.Add("B4"); StringBuilder sb = new StringBuilder();
sb.Append("<script type='text/javascript'>");
sb.Append("var selection = new Array();"); for (int i = 0; i < list.Count; i++)
{
sb.Append(string.Format("selection[{0}] = '{1}';", i, list[i]));
} sb.Append("</script>"); this.Page.ClientScript.RegisterClientScriptBlock(typeof(string), "selections", sb.ToString());
}
}
要是有示例就好了,哈哈.