由於html控制項中沒有組合框，所以web 組合框需要用特殊方法構造，當然構造方法有很多了：
一、利用文字框與列表框疊加而成，這個需要用css的clip，用的較多，但是需要絕對位置，而且定位需要精確。
二、一個文字框 + 一個新的頁面 ，這種方法用的也不少，也就是載入頁面時只裝載文字框，只有需要的時候才通過代開一個新頁面的方式開啟列表。
三、利用文字框與一個列表容器並排擺放，但是列表容器需定義為絕對位置，但是不給其 left 和 top 的 定義。這個容器即可以是<div><span><table>等容器，也可以是清單控制項。
下面就利用第三種方法實現組合框，這個組合框利用的容器是<div><table></table></div>,而且支援動態過濾，也就是當你在文字框中輸入用於過濾的文本後，就可以根據輸入的文本，自動過濾列表，也縮小選取範圍。
核心代碼如下：
<script language="javascript">
///////////////// 動態列表 start ////////////////////////////////
//用於由一個文字框和一個div組成的用於根據別名動態挑選清單
var ifMouseOver=0;
var PatA=/[^/x00-/xff]+/; //一個Regex，當文字框中的文字元合這個正則時，就不進行過濾
function dl_mouseOver(p1)
{
ifMouseOver=1;
}
function dl_mouseOut(p1)
{
ifMouseOver=0;
}
function dl_showDiv(p1)
{
var DivObj=document.getElementById(p1);
if(DivObj)
{
if(DivObj.style.display=='none')
DivObj.style.display='';
else
DivObj.style.display='none';
}
}
function dl_hideDiv(p1)
{
var DivObj=document.getElementById(p1);
if(DivObj)
{
if(DivObj.style.display=='' && ifMouseOver==0)
DivObj.style.display='none'; }
}
function dl_InsertData(p1,p2,p3)
{
var DivObj=document.getElementById(p2);
var textObj=document.getElementById(p3);
if(textObj) textObj.value=p1.innerText;
if(DivObj) {DivObj.style.display='none';}
}
var s_value="";
function dl_sFilter(p1,p3,p5,p7)
{
//var kCode=event.keyCode;
//var ccds=document.selection.createRange();
//ccds.pasteText='';
var tmpP1=p1.value;
if(PatA.test(tmpP1)) return false;
//document.selection .clear ();
if (tmpP1!=s_value)
{
s_value=tmpP1;
if(document.getElementById(p3))
document.getElementById(p3).style.display='';
for(var n=0;n<p5.length;n++)
{
if(p5[n].indexOf(tmpP1)>=0)
{
if(document.getElementById(p7 + n))
document.getElementById(p7 + n).style.display='';
}
else
{
if(document.getElementById(p7 + n))
document.getElementById(p7 + n).style.display='none';
}
}
}
}
/////////////////// 動態列表 end ////////////////////////////////////
</script>
<% sub create_Dy_select(p_arrayname,byref p_rs,p_alias_field,p_main_field,p_inputname,p_divid,p_tr_id)
'p_arrayname 產生的js數組名字
'p_rs 資料庫記錄集
'p_alias_field 別名欄位名，用於過濾，如果與p_main_field相同，就是我們常見的組合框過濾方法
'p_main_field 主欄位名
'p_inputname 文字框名字
'p_divid div容器的ID
'p_tr_id 表格行id首碼
r_count=p_rs.RecordCount
if r_count>0 then
%>
<!-- 動態列表代碼 start -->
<script language="javascript">
var <%=p_arrayname%>=new Array(<%=r_count%>)
var mm=0;
</script>
<%end if%>
<div id="<%=p_divid%>" onmouseover="dl_mouseOver(this);" onmouseout="dl_mouseOut();" style="border:1 solid #FF0000;cursor:default;width:150;height:200;overflow-y:auto;background-color:#e0e0e0;position:absolute;display:'none'">
<table width=100%>
<%
if r_count>0 then
dim i
i=0
do while not p_rs.EOF
o_alias=p_rs(p_alias_field)
%>
<script language="javascript">
<%=p_arrayname%>[mm]='<%=o_alias%>';
mm++;
</script>
<tr id="<%=p_tr_id%><%=i%>" onmouseover="this.style.backgroundColor='<%=selectedOptionBgColor%>';this.style.color='<%=selectedOptionColor%>';" onmouseout="this.style.backgroundColor='';this.style.color='';"><td width=100% onclick="dl_InsertData(this,'<%=p_divid%>','<%=p_inputname%>');">
<%=p_rs(p_main_field)%>
</td></tr>
<% i=i+1
p_rs.MoveNext
loop
end if
%>
</table>
</div>
<!-- 動態列表代碼 end -->
<%end sub%>
調用方法：
<% s_arrayname ="js_array_1"
s_alias_field ="cz_alias"
s_main_field ="cz_name"
s_inputname ="cz"
s_divid ="selectList_1"
s_tr_id ="tr_id_1"
%>
<input name="<%=s_inputname%>" type="text" onclick="dl_showDiv('<%=s_divid%>');" onblur="dl_hideDiv('<%=s_divid%>')" onkeyup="dl_sFilter(this,'<%=s_divid%>',<%=s_arrayname%>,'<%=s_tr_id%>');"><br>
<%
Call create_Dy_select(s_arrayname,rs,s_alias_field,s_main_field,s_inputname,s_divid,s_tr_id)
%>
