可输入并可以自动检索的下拉框列表

<html>
<!--函数说明:可输入的下拉框列表改进第二版.
基本参考的阿信的"可输入下拉框第二版",不过将调用接口改进了,并允许用户为控件命名,方便大家在项目中调用.

接口说明:
1: addSelect(obj_id,DefaultValue) 增加空的select控件
参数说明:
obj_id: 控件的id号.
DefaultValue: 缺省值.
2: addOption(value,ID) 增加option列表
参数说明:
value: 下拉列表中每一项的值
ID: 如果存在多个控件,第一个控件的ID值为0,第二个为1,一此类推.

使用说明:将源代码中<style>与</style>之间的代码和<script>与</script>之间的代码拷贝到你需要调用该控件的页面的相应位置.然后在需要显示控件的地方调用上面两个接口.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可输入的下拉框改进第二版</title>
<style>
.selectBox{
border-top-color : #7C7C7C;
border-left-color : #7C7C7C;
border-right-color : #D0D0D0;
border-bottom-color : #D0D0D0;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.editBox{
border:0px;
width:100%;
cursor:default;
width:100%;
padding-top:2px;
margin-top: 1px;
margin-right: auto;
margin-bottom: 1px;
margin-left: auto;
}
.dropdownbutton{
font-size:12px;
font-family:webdings;
color:#000000;
background-color:#D4D0C8;
margin:1px;
cursor:default;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E4E4E4;
border-right-color: #7C7C7C;
border-bottom-color: #7C7C7C;
border-left-color: #E4E4E4;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
}
.selectContent{
position:absolute;
visibility:hidden;
z-index:1000;
background-color:#FFFFFF;
border: 1px solid #000000;
}
.selectContent tr{cursor:default}
.selectContent td{
font-size:12px;
font-family:Vendana;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 3px;
}
.OnFocus{color:#FFFFFF;background-color:#0A246A}
</style>
<script language="javascript">
var ZfSelect=[]
var CurrentTR=null
function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()
//在第ID个控件下增加option选项
function addOption(v,ID) {

var i=ID+1;
//var sv=document.all['ZfSelect_'+ID];
if(!v.Trim())
{
return;
}
var tb=document.all['ZfSelect'+i];
// var test = 'ZfSelect' + i;
// var tb = document.all[test];
// alert(tb);
// alert(document.all['ZfSelect'+i]);
//tb.insertRow();
//alert(tb.id);return;
// tb.rows.length 代表有几行数据

var c=tb.insertRow(tb.rows.length).insertCell();
// 下拉列表中的显示值 c.innerHTML
c.innerHTML=v.Trim();

c.onmouseover=new Function("MouseOver(this)");

c.onmouseout=new Function("out(this)");

c.onclick=new Function("MouseClick("+ID+",this)");

//c.className="td_out";
v='';
}
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addSelect(name,DefValue) {
var i=getSelCount();

var j=i+1;
//alert("i is:"+i);
var str='<table id="ZfContainer'+j+'" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0><tr><td><input name="'+name+'" value="'+DefValue+'" class="editBox" onblur="BoxBlur(this)" onclick="DropDown('+i+')" onkeyup="showTip('+i+')" onmouseenter="selectmove()" onmouseout="selMouseOut(this)"></td>    <td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown('+i+')">6</span></td> </tr></table>';

document.write(str);

str='<table id="ZfSelect'+j+'" class="selectContent" cellspacing=0 cellpadding=0></table>';
// str='<table id="ZfSelect'+j+'" class="selectContent" cellspacing=0 cellpadding=0> <tr onmouseover="MouseOver(this)" onclick="MouseClick('+i+',this)" title="作者:Andy">    <td>'+name+'</td> </tr></table>';
//alert(str);

    document.write(str);
ZfSelect[i]=["ZfContainer"+j,name,"ZfSelect"+j] ;

var s=GetObj(ZfSelect[i][0])

var ZfContainer=GetObj(ZfSelect[i][2])

ZfContainer.style.width=s.offsetWidth>ZfContainer.offsetWidth?s.offsetWidth:ZfContainer.offsetWidth
}

function getSelCount() {
var i=1;
while (eval("document.getElementById('ZfContainer"+i+"')")!=null) i++;
return i-1;

}

}
function MouseClick(Index,trObj){
with(GetObj(ZfSelect[Index][1])){
  value=trObj.innerText; //使text显示点击的值
  style.backgroundColor='#0A246A';
  style.color='#FFFFFF';
  focus();
  piPei(value);
for (g=0;g<document.form.persontype.length;g++)
{
//alert("enter...");
if (document.form.persontype.options[g].text==value)
{

  value=value
  break;
}
}
}
DropDown(Index)

}
function GoURL(trObj){
var url=trObj.getAttribute("url")
if(url&&url!="")window.open(url)
}

// 离开输入框的时候失去焦点事件
function BoxBlur(InputBox){

with(InputBox.style){backgroundColor="";color=''}
}

// 鼠标单击事件 show为true或者false
// 按下的时候为TRUE，
function DropDown(Index){
event.cancelBubble=true;

ZfContainerReset(Index);
var show=GetObj(ZfSelect[Index][2]).style.visibility=='visible';

GetObj(ZfSelect[Index][2]).style.visibility=show?'hidden':'visible';
setPosition(Index)
}
function document::onclick(){
for(i=0;i<ZfSelect.length;i++){
GetObj(ZfSelect[i][2]).style.visibility='hidden';
with(GetObj(ZfSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display="";
}
}
function window::onresize(){
for(i=0;i<ZfSelect.length;i++)setPosition(i)
}
// 键盘按下的时候掉用的事件
// ZfContainer.rows.length为下拉列表中值的个数这里为8和2
function showTip(Index){
var inputbox=GetObj(ZfSelect[Index][1])
var ZfContainer=GetObj(ZfSelect[Index][2])
var num=0

ZfContainer.style.visibility="visible"
for(i=0;i<ZfContainer.rows.length;i++){
if(ZfContainer.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)ZfContainer.rows[i].style.display="none"
else {ZfContainer.rows[i].style.display="";num++}
}
if(num==0)ZfContainer.style.visibility='hidden'
}
function ZfContainerReset(Index){
var ZfContainer=GetObj(ZfSelect[Index][2])
for(i=0;i<ZfContainer.rows.length;i++)
{
ZfContainer.rows[i].style.display=""

}

if(CurrentTR)CurrentTR.className=""
}
// 公用方法
function setPosition(Index){
var s=GetObj(ZfSelect[Index][0])
var ZfContainer=GetObj(ZfSelect[Index][2])
var l=s.offsetLeft;
var t=s.offsetTop;

while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}
with(ZfContainer.style){left=l+1;top=t+GetObj(ZfSelect[Index][0]).offsetHeight}
}
// 得到一个对象
function GetObj(id){

return document.getElementById(id)

}

// 鼠标进入该区域的时候调用的事件
// r.text为列表的显示值

function selectmove()
{

var r
if(window.event.srcElement.isTextEdit) {
  r=window.event.srcElement.createTextRange();
}else{
  var el=window.event.srcElement.parentTextEdit;
  //var el=window.event.srcElement.persontype.options[form1.persontype.selectedIndex]
  r=el.createTextRange();
}
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
;
var str = r.text;

if(str.length > 0 ) {
  with(zoom_show.style) {
   display = "";
   top = event.y + 10;
   left = event.x + 10;
  }
  zoom_show.innerText = str;
} else {
  zoom_show.style.display = "none";
}

}

<div id="zoom_show" style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
<tr>
<td><select name="persontype" style="display:none;">
        <option value='-1'>全部</option>
  <option value='1000'>运输干部运输干部运输干部运输干部运输干部运输干部运输干部</option>
  <option value='1001'>车辆驾驶员</option>
  <option value='1002'>车辆修理工</option>
  <option value='1003'>船艇机电工</option>
  <option value='1004'>油料员</option>
  <option value='1005'>我自己</option>
</select></td>
<tr>

addOption(document.form.persontype[g].text,0);
}

</script>
<input type="text">
<br>
<select name="persontypssse">
                <option value='-1'>全部</option>
  <option value='1000'>运输干部运输干部运输干部运输干部运输干部运输干部运输干部</option>
  <option value='1001'>车辆驾驶员</option>
  <option value='1002'>车辆修理工</option>
  <option value='1003'>船艇机电工</option>
  <option value='1004'>油料员</option>
  <option value='1005'>我自己</option>
</select>
<br><br><br><br>
<input type="hidden" name="realValue" value="">
<input type="button" value=" 点击提交 " onClick="clickForSubmit();">
</form>
</table>
</body>
</html>

本Blog纯属个人学习、工作需要，记录相关资料。请不要发表任何有人身攻击的言论，谢谢！ www.zhipsoft.cn

posted on 2007-05-28 15:05 ZhipSoft 阅读(6431) 评论(3) 编辑收藏所属分类: JavaScript

常用链接

留言簿(5)

随笔分类(82)

随笔档案(94)

博客链接

站点收藏

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问
相关文章: 通过网页修改activex安全设置，添加信任站点，禁用弹出窗口阻止程序【已解决】求助：IE7.0在框架页面里JS刷新无效！ IE6、IE7、FF 的CSS + DIV 兼容问题综合解决方案CSS HACK JS动态添加删除行 FCK中文图片上传乱码问题解决办法对js中startWith和endWith的扩展去掉FLASH激活提示（双击才能打开超链接） js脚本常用代码关闭IE窗口时执行事件如何去掉ie窗口得工具栏，菜单栏