当前位置: 代码迷 >> JavaScript >> 用文本框中在下拉列表中搜索用JS来实现,该如何解决
  详细解决方案

用文本框中在下拉列表中搜索用JS来实现,该如何解决

热度:83   发布时间:2012-02-25 10:01:47.0
用文本框中在下拉列表中搜索用JS来实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<style type="text/css"> 
<!-- 
#Layer1 { 
  position:absolute; 
  left:100px; 
  top:37px; 
  width:200px; 
  height:60px; 
  z-index:1; 
  border-top-width: 1px; 
  border-right-width: 1px; 
  border-bottom-width: 1px; 
  border-left-width: 1px; 
  border-top-style: outset; 
  border-right-style: outset; 
  border-bottom-style: outset; 
  border-left-style: outset; 

body,td,th { 
  font-size: 9pt; 

--> 
</style> 
<SCRIPT language="JavaScript"> 
var OldValue; 
OldValue = ""; 
function chazhao(NewValue) 
{  
  var ss="" 
  if(NewValue=="") 
  { 
  return false; 
  } 
  if (OldValue != NewValue) 
  {  
  OldValue = NewValue; 
  var sels=document.getElementById("sel"); 
  //alert(sels.options[1].innerText); 
  var le=sels.options.length; 
  for(i=0;i <le;i++) 
  { 
   
  if((sels.options[i].innerText).indexOf(NewValue)!=-1) 
  {  
ss=ss+" <span style=width:147;cursor:hand onMouseover=this.style.background='#cccccc' onMouseout=this.style.background='#ffffff' onclick=document.getElementById('Layer1').style.display='none';document.getElementById('wenben').value='"+sels.options[i].innerText+"'> "+sels.options[i].innerText+" </span> <br> "
 

  if(ss!="") 
  {  
  document.getElementById("jieguo").innerHTML=ss; 
  document.getElementById("Layer1").style.display=""; 
  } 
  } 
  } 

</script> 
   
  <select id="sel" style="width:147;margin-left:-133">  
  <option value="我们"> 我们 </option>  
  <option value="张一"> 张一 </option>  
  <option value="张二"> 张二 </option> 
  <option value="张四"> 张四 </option>  
  <option value="李二"> 李二 </option> 
  <option value="爱在西元"> 爱在西元 </option> 
  <option value="在爱西元"> 在爱西元 </option> 
  <option value="西元"> 西元 </option> 
  相关解决方案