分享
 
 
 

web组合框的实现方法

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

由于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%>');">

<%=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"

%>

<inputname="<%=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)

%>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有