可编辑的下拉列表+模糊搜索（模拟）

最新推荐文章于 2024-05-21 18:11:13 发布

luckystar2008

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量112

点赞数

文章标签： html

Js+Css+Html 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
  
 <BODY>
  <h5>可编辑的下拉列表</h5>
  <table cellspacing=0 cellpadding=0>
   <tr>
     <td align='right'>
     <span>
      <input type='text' id='searchTxt' style='width:120pt;'>
     </span>
     </td>
     <td align='left'>
     <span style='width:15pt;'>
      <select id='phone' name='phone' style='width:135pt;margin-left:-122pt;overflow:hidden;' οnchange='searchTxt.value=this.value;'>
       <option value='-1'>请选择</option>
       <option value='motorola'>摩托罗拉</option>
      </select>
     </span>
    </td>
   </tr>
  </table>

  <iframe id='resultFrame' frameBorder='0' style='width:133pt;height:100pt;overflow:hidden;' scrolling='auto'></iframe>

  <script>
   var searchTxt = document.all.searchTxt;
   searchTxt.onkeyup = function(){
    document.all.resultFrame.src = 'content.html';
   }

  </script>
 </BODY>
</HTML>


content.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  table {
   font-size:13px;
   width:120pt;
  }

  .trMouseOver {
   background-color:#6666FF;
  }
  .trMouseOut {
   background-color:#FFFFFF;
  }
  </style>
 </HEAD>

 <BODY>
 <table>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT200</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT201</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT202</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT203</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT204</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT205</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT206</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT207</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT208</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT209</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT210</td></tr>
  <tr οnmοuseοver='trMouseOver(this);' οnmοuseοut='trMouseOut(this);' οnclick='trClick(this);'><td>XT211</td></tr>
 </table>

 <script>
   trMouseOver =  function(obj){
    obj.className = 'trMouseOver';
   }
   trMouseOut = function(obj){
    obj.className = 'trMouseOut';
   }

   trClick = function(obj) {
    alert(obj.childNodes[0].innerText);
    parent.document.all.searchTxt.value = obj.childNodes[0].innerText;
    parent.document.all.resultFrame.style.display='none';
   }
 </script>
 </BODY>
</HTML>

luckystar2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可编辑的下拉列表+模糊搜索（模拟）

index.html:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;META NAME="Generator" CONT
复制链接

扫一扫