1. 爱易网页
2. JS特效
3. 可以快捷选择的下拉菜单

日期：2014-05-18　 浏览次数：20327 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

要完成此效果需要三个步骤 第一步：把如下代码加入到<head>区域中 <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function SelObj(formname,selname,textname,str) { this.formname = formname; this.selname = selname; this.textname = textname; this.select_str = str || ''; this.selectArr = new Array(); this.initialize = initialize; this.bldInitial = bldInitial; this.bldUpdate = bldUpdate; } function initialize() { if (this.select_str =='') { for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++) { this.selectArr[i] = document.forms[this.formname][this.selname].options[i]; this.select_str += document.forms[this.formname][this.selname].options[i].value+":"+ document.forms[this.formname][this.selname].options[i].text+","; } } else { var tempArr = this.select_str.split(','); for(var i=0;i<tempArr.length;i++) { var prop = tempArr[i].split(':'); this.selectArr[i] = new Option(prop[1],prop[0]); } } return; } function bldInitial() { this.initialize(); for(var i=0;i<this.selectArr.length;i++) document.forms[this.formname][this.selname].options[i] = this.selectArr[i]; document.forms[this.formname][this.selname].options.length = this.selectArr.length; return; } function bldUpdate() { var str = document.forms[this.formname][this.textname].value.replace('^\\s*',''); if(str == '') {this.bldInitial();return;} this.initialize(); var j = 0; pattern1 = new RegExp("^"+str,"i"); for(var i=0;i<this.selectArr.length;i++) if(pattern1.test(this.selectArr[i].text)) document.forms[this.formname][this.selname].options[j++] = this.selectArr[i]; document.forms[this.formname][this.selname].options.length = j; if(j==1){ document.forms[this.formname][this.selname].options[0].selected = true; //document.forms[this.formname][this.textname].value = document.forms[this.formname][this.selname].options[0].text; } } function setUp() { obj1 = new SelObj('menuform','itemlist','entry'); obj1.bldInitial(); } // End --> </script> 第二步：把如下代码加入到<body>区域中 <center> <form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;"> <font face="arial, helvetica" size="-1">键入a-d看看效果.</font> <br> <br> <input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();"> <br> <select name="itemlist" size=5> <option value="page.html">ALL <option value="page.html">ALL CATALOG <option value="page.html">ALL CLUSTERS <option value="page.html">ALL CLUSTERS HASH EXPRESSIONS <option value="page.html">ALL COL COMMENTS <option value="page.html">ALL COL PRIVS <option value="page.html">ALL COL PRIVS MADE <option value="page.html">ALL COL PRIVS SENT <option value="page.html">ALL CONSTRAINTS <option value="page.html">ALL CONS COLUMNS <option value="page.html">ALL DB LINKS <option value="page.html">ALL DEF AUDIT <option value="page.html">ALL DEPENDENCIES <option value="page.html">ALL ERRORS <option value="page.html">ALL HISTOGRAMS <option value="page.html">ALL INDEXES <option value="page.html">ALL IND COLUMNS <option value="page.html">ALL JOBS <option value="page.html">ALL OBJECTS <option value="page.html">ALL REFRESH <option value="page.html">ALL REFR</div></div> <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li> <li class="next"><a href="540">下一篇：可调整的列表菜单项</a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34169' title='史上最严电话实名制9月实行 三大难题待解' target="_blank"> 史上最严电话实名制9月实行 三大难题待解</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34319' title='“扫黄打非”下9158否认遭整顿' target="_blank"> “扫黄打非”下9158否认遭整顿</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/10821' title='阿朗力避步北电后尘 急切停止自我革新' target="_blank"> 阿朗力避步北电后尘 急切停止自我革新</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/6888' title='HTC手机为何一败再败？效果出在供应链' target="_blank"> HTC手机为何一败再败？效果出在供应链</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34393' title='支付宝钱包支持医保移动缴费 广州成首个试点' target="_blank"> 支付宝钱包支持医保移动缴费 广州成首个试点</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34189' title='全球最具“颠覆性”特质的公司排行榜TOP25' target="_blank"> 全球最具“颠覆性”特质的公司排行榜TOP25</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34293' title='携程整合去哪儿陷入僵局 欲联手老对手艺龙' target="_blank"> 携程整合去哪儿陷入僵局 欲联手老对手艺龙</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34279' title='湖南卫视扶持芒果TV杀入媒体：版权独播不分销' target="_blank"> 湖南卫视扶持芒果TV杀入媒体：版权独播不分销</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/16155' title='苹果20年以来首次发债 融资170亿美元' target="_blank"> 苹果20年以来首次发债 融资170亿美元</a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/host/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/hostTest15day.png" alt="香港全能空间 免费试用15天香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/ItNews/394 title='空气污染器市场乱象丛生 选购需慎重' target="_blank"> 空气污染器市场乱象丛生 选购需慎重</a></li> <li class="articleAbout"><a href=/ItNews/34225 title='薛蛮子取保后首次发微博表示：辜负你们了' target="_blank"> 薛蛮子取保后首次发微博表示：辜负你们了</a></li> <li class="articleAbout"><a href=/ItNews/34453 title='中国大陆人口13.7亿 光棍越来越多' target="_blank"> 中国大陆人口13.7亿 光棍越来越多</a></li> <li class="articleAbout"><a href=/ItNews/34254 title='称产品遭诋毁 奇虎再诉百度' target="_blank"> 称产品遭诋毁 奇虎再诉百度</a></li> <li class="articleAbout"><a href=/ItNews/34306 title='刘强东：京东上市融资用于开拓三至六线城市' target="_blank"> 刘强东：京东上市融资用于开拓三至六线城市</a></li> <li class="articleAbout"><a href=/ItNews/34199 title='HDS发布《2013中国CIO洞察白皮书》' target="_blank"> HDS发布《2013中国CIO洞察白皮书》</a></li> <li class="articleAbout"><a href=/ItNews/34108 title='广东移动高层受调查 中移动或现更大反腐风暴' target="_blank"> 广东移动高层受调查 中移动或现更大反腐风暴</a></li> <li class="articleAbout"><a href=/ItNews/6897 title='苹果6月20日发布iPhone5S 触摸屏概念股生动' target="_blank"> 苹果6月20日发布iPhone5S 触摸屏概念股生动</a></li> <li class="articleAbout"><a href=/ItNews/34390 title='微信企业号必须搬走四座大山，否则只能铩羽而归！' target="_blank"> 微信企业号必须搬走四座大山，否则只能铩羽而归！</a></li> <li class="articleAbout"><a href=/ItNews/34151 title='京东封杀财付通：终极目标是电商生态圈' target="_blank"> 京东封杀财付通：终极目标是电商生态圈</a></li> <li class="articleAbout"><a href=/ItNews/10841 title='华为任正非：家族成员不会成为接班人' target="_blank"> 华为任正非：家族成员不会成为接班人</a></li> <li class="articleAbout"><a href=/ItNews/430 title='支付宝27日晚间曝严重破绽：买卖记载可被搜索' target="_blank"> 支付宝27日晚间曝严重破绽：买卖记载可被搜索</a></li> <li class="articleAbout"><a href=/ItNews/6863 title='搜房网遭遇做空 利益保送成“猎杀”焦点' target="_blank"> 搜房网遭遇做空 利益保送成“猎杀”焦点</a></li> <li class="articleAbout"><a href=/ItNews/34300 title='中移动将推出多项4G资费新政' target="_blank"> 中移动将推出多项4G资费新政</a></li> <li class="articleAbout"><a href=/ItNews/34263 title='窗口期：还有哪些互联网公司可能今年IPO？' target="_blank"> 窗口期：还有哪些互联网公司可能今年IPO？</a></li> <li class="articleAbout"><a href=/ItNews/34363 title='阿里物流搭上邮政：京东，我们在终点等你！' target="_blank"> 阿里物流搭上邮政：京东，我们在终点等你！</a></li> <li class="articleAbout"><a href=/ItNews/34315 title='国美在线叫板京东：李俊涛底气在哪?' target="_blank"> 国美在线叫板京东：李俊涛底气在哪?</a></li> <li class="articleAbout"><a href=/ItNews/34368 title='湘鄂情剥离餐饮业务进军大数据的底气在哪里？' target="_blank"> 湘鄂情剥离餐饮业务进军大数据的底气在哪里？</a></li> <li class="articleAbout"><a href=/ItNews/10832 title='弯曲变形：手机全新的交互方式' target="_blank"> 弯曲变形：手机全新的交互方式</a></li> <li class="articleAbout"><a href=/ItNews/34268 title='170号码扎堆上市：手机话费私人定制时代到来？' target="_blank"> 170号码扎堆上市：手机话费私人定制时代到来？</a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2026 爱易网页 当前在线：330人　 网站在1时48分0秒内访问总人数：25677人 2秒前 26.20% 　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>