ZhipSoft.com
    冬去春来
        郑重声明:本Blog纯属个人学习、工作需要,记录相关资料。请不要发表任何有人身攻击的言论,谢谢!!www.ZhipSoft.com
posts - 94,comments - 149,trackbacks - 0

<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 MouseOver(trObj){
 if(!CurrentTR)CurrentTR=trObj
 CurrentTR.className=""
 trObj.className="OnFocus"
        trObj.title=trObj.innerText
 CurrentTR=trObj;
}
//select 选择框鼠标移开时消失
function selMouseOut(obj)
{
 with (document.all.zoom_show)
 {
  style.display = "none"
 }
}
function ButtonOver(BtnObj){
 BtnObj.style.backgroundColor='#BAB4A7'
}
function ButtonOut(BtnObj){
 BtnObj.style.backgroundColor='#D4D0C8'
}
// 使text显示点击的值
// 点击每一项的时候调用的方法
function piPei(value) {
for(i=0;i<document.form.persontype.length;i++) {
var test = document.form.persontype[i].text;
 if(value==test) {
  document.form.realValue.value=document.form.persontype[i].value;
   
}
}

}
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";
 }
 
}

function bodyclick()
{
 //alert(name1.value);
}
function fuzhi() {
document.form.realValue.value = document.form.persontype.options[o].value;
}
function clickForSubmit()
{
 var tempValue=document.all["realValue"].value;
 document.location.href="select.html?vaues='"+tempValue+"'";
}
</script>
</head>
<body onclick="bodyclick()">
<PRE></PRE>
<table>
<form name="form" action="select.html" >

 <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>


<script language="javascript">
 addSelect("name1","");
 
  for (g=0;g<document.form.persontype.length;g++)
  {

  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 阅读(6418) 评论(3)  编辑  收藏 所属分类: JavaScript

FeedBack:
# re: 可输入并可以自动检索的下拉框列表
2010-01-20 14:30 | ggmm21
怎样给select下拉框添加滚动条,并支持键盘上、下选择确定  回复  更多评论
  
# dds
2010-08-18 09:06 | sdfs
dsf  回复  更多评论
  
# re: 可输入并可以自动检索的下拉框列表[未登录]
2011-05-26 18:01 | oscar
同感,我都想知道如何加滚动条,这个非常重要
  回复  更多评论
  

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


网站导航: