下拉框内容自动匹配特效

作者:sky 点击:87 评论:0 发布时间:周日, 06/28/2009 - 13:42 所属分类:表单按钮

在搜索框内输入关键词，下拉框中自动匹配类似内容。

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>网页特效下拉框内容自动匹配效果站长特效网欢迎您。</title> <style> a{color:red;text-decoration:none;font-size:12px} </style> </head> <body onload="Init()"> <center> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <form name=frm> <table> <tr> <td>请输入zzjs测试：<br><input name="txt" style="width:100px" onkeyup="SelectTip(0)"> <input type="button" value="reset" onclick="SelectTip(1)"></td> </tr> <tr> <td> <span id="www_zzjs_net"><select name="www_zzjs_net" style="width:100px" size=10 onchange="txt.value=options[selectedIndex].text;"> <option value="1">1</option> <option value="12">12</option> <option value="123">123</option> <option value="1234">1234</option> <option value="2">2</option> <option value="23">23</option> <option value="234">234</option> <option value="2345">2345</option> <option value="3">3</option> <option value="34">34</option> <option value="345">345</option> <option value="3456">3456</option> <option value="5">5</option> <option value="51">51</option> <option value="51w">51w</option> <option value="51wi">51wi</option> <option value="51win">51win</option> <option value="51windows">51windows</option> <option value="zzjs">zzjs</option> <option value="zzjs.net">zzjs.net</option> <option value="www.zzjs.net">www.zzjs.net</option> </select></span> </td> </tr> </form> </table> <hr> <script language="javascript"> var TempArr=[];//存贮option function Init(){ var SelectObj=document.frm.elements["www_zzjs_net"] /*先将数据存入数组*/ with(SelectObj) for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value] }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 function SelectTip(flag){ var TxtObj=document.frm.elements["txt"] var SelectObj=document.getElementById("www_zzjs_net") var Arr=[] with(SelectObj){ var SelectHTML=innerHTML.match(/<[^>]*>/)[0] for(i=0;i<TempArr.length;i++) if(TempArr[i][0].indexOf(TxtObj.value)==0||flag)//若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化 Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>" innerHTML=SelectHTML+Arr.join()+"</SELECT>" } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 </script> </body> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: