当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 可输入的select改进版本,同一页面可有多个list,调用接口简化

Javascript
JavaScript中出现乱码的处理心得
JQuery 写的个性导航菜单
Jquery 高亮显示文本中重要的关键字
使用jQuery获取radio/checkbox组的值的代码收集
jquery 弹出登录窗口实现代码
JQuery与iframe交互实现代码
Javascript 键盘keyCode键码值表
javascript 事件加载与预加载
javascript 处理事件绑定的一些兼容写法
javascript 鼠标事件总结
javascript 异步的innerHTML使用分析
javascript 键盘事件总结 推荐
javascript Array对象使用小结
再谈javascript 动态添加样式规则 W3C校检
用Javascript同时提交多个Web表单的方法
javascript 闪烁的圣诞树实现代码
键盘上下键移动选择table表格行的js代码
javascript 计算两个整数的百分比值
js tab效果的实现代码
默认让页面的第一个控件选中的javascript代码

No. « 253 254 255 256 »

技术文章搜索

关键字

Javascript 中的 可输入的select改进版本,同一页面可有多个list,调用接口简化

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 149 ::
收藏到网摘: n/a

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}
.td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;}
.td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px}
.slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;}
.down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold;
}
.seldiv{
position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;
SCROLLBAR-FACE-COLOR: #d0dff7;
SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;}
</style>
<script language="JavaScript">
document.onclick=hiddenDiv;
function getDivCount() {
 var arr=document.all; 
 re=0;
 for (i=0;i<arr.length;i++) {
  str=arr[i].id;  
  if (str.indexOf("ZfDiv_")==0) {   
   re++;  
  }
 } 
 return re;
}

function getI(ObjId) {//取得objId的最后一位数字
 for (i=0;i<ObjId.length;i++) {
  if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1);
 }
 return 0;
}

function select_edit(TextObj){//鼠标经过高亮度 
 TextObj.focus();TextObj.select();
}

function checkValue(ID){   
 var sl=document.all["ZfText_"+ID]; 
 var sv=document.all["ZfDiv_"+ID];
 var da=document.all["ZfData_"+ID];   
 sv.style.display=''
 
 for(i=0;i<da.rows.length;i++)da.rows[i].style.display=''
 
 for(i=0;i<da.rows.length;i++){
  if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none';
  getPosition(ID);
 } 
}

function getL(e){
 var l=e.offsetLeft;
 while(e=e.offsetParent){
  l+=e.offsetLeft;
 }
 return l
}
function getT(e){
 var t=e.offsetTop;
 while(e=e.offsetParent){
  t+=e.offsetTop;
 }
 return t
}

function getPosition(ID){ 
 var sv=document.all["ZfDiv_"+ID];
 var sl=document.all["ZfText_"+ID];
 var spn=document.all["ZfSpan_"+ID];
 var da=document.getElementById("ZfData_"+ID);
 sv.style.pixelWidth=spn.offsetWidth;
 da.style.pixelWidth=sv.offsetWidth;
 sv.style.pixelLeft=getL(spn);
 sv.style.pixelTop=getT(spn)+sl.offsetHeight+3;
 if(da.offsetHeight>200){
  sv.style.pixelHeight=200;
  sv.style.overflowY='scroll';
 }
 else {
  sv.style.pixelHeight=da.offsetHeight;
  sv.style.overflowY='hidden';
 }
}

function dropDown(ID){ 
 var sv=document.all["ZfDiv_"+ID]
 var tb=document.all["ZfData_"+ID]
 
 if(sv.style.display=='none'){  
  sv.style.display='';  
  for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display=''
  getPosition(ID);  
 } else {  
  sv.style.display='none';
 }
}//下拉摸拟层

function hiddenDiv(){
 var o=window.event.srcElement.id;
 var tb 
 var sv 
 if(o=="") {
  for (j=0;j<getDivCount();j++) {
   tb=document.getElementById('ZfData_'+j);
   sv=document.getElementById('ZfDiv_'+j);   
   for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display='';
   sv.style.display='none';   
  }
  
 }

}//隐藏模拟层


function setValue(obj){
var i=getI(obj.parentElement.parentElement.parentElement.id);
//alert(obj.parentElement.parentElement.parentElement.id);

var sl=document.all["ZfText_"+i];
var sv=document.all['ZfDiv_'+i];
sl.value=obj.innerText;
sv.style.display='none';
//sldIndex=obj.parentElement.rowIndex;
}//给文本框赋值

function over(obj){
 obj.className="td_over"
 obj.title=obj.innerText
 obj.focus();
}//鼠标经过变色

function out(obj){
 obj.className="td_out"
}//鼠标离开还原

function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()


//增加list的接口,ID表示该组控件是页面中的第几个
function add(v,ID){
var sv=document.all['ZfDiv_'+ID];
if(!v.Trim()){return;}
var tb=document.all['ZfData_'+ID];
var c=tb.insertRow(tb.rows.length).insertCell();
c.innerHTML='<nobr>'+v.Trim()+'</nobr>';
c.onmouseover=new Function("over(this)");
c.onmouseout=new Function("out(this)");
c.onclick=new Function("setValue(this)");
c.className="td_out";
v='';
}
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addText(name,DefValue) {
 var i=getDivCount();
 document.write('<span id="ZfSpan_'+i+'" style="border:1 solid #9CA0CB">');
 document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" class="slv" onmouseover="select_edit(this)"  onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\'\'" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\'\'"></span>');
 document.write('<div id="ZfDiv_'+i+'" class="seldiv" style="display:none;"><table id="ZfData_'+i+'" onselectstart="return false" border="0"  cellspacing="0" cellpadding="0" class="table1"></table></div>');
}

 

</script>
</head>
<body>

<script language="JavaScript">
addText("name1","a");
add("1234",0);
add("1234",0);
addText("name1","a");
add("1234",1);
add("1234",1);
</script>
</body>
</html>