web组合框的实现方法

　　由于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] /;　　 //一个正则表达式，当文本框中的文字符合这个正则时，就不进行过滤
　 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%>');">

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有