Select标签加超链接的方法

  • A+
所属分类:Web前端
摘要

select 标签可创建单选或多选菜单,很多时候需要实现链接跳转,下面是三种实现方法

Select标签加超链接的方法

select 标签可创建单选或多选菜单,很多时候需要实现链接跳转,下面是三种实现方法:

第一种方法:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>select加链接</title>
  5. </head>
  6. <body>
  7. <SCRIPT language=javascript>
  8. <!--
  9. // open the related site windows
  10. function mbar(sobj) {
  11. var docurl =sobj.options[sobj.selectedIndex].value;
  12. if (docurl != "") {
  13. open(docurl,'_blank');
  14. sobj.selectedIndex=0;
  15. sobj.blur();
  16. }
  17. }
  18. //-->
  19. </SCRIPT>
  20. <Select onchange=mbar(this) name="select">
  21. <OPTION selected>=== 合作伙伴 ===</OPTION>
  22. <OPTION value="http://www.baidu.com">百度</OPTION>
  23. <OPTION value="http://www.163.com">网易</OPTION>
  24. <OPTION value="http://www.flash8.net/">闪吧</OPTION>
  25. </Select>
  26. </body>
  27. </html>

第二种方法:

  1. <select name="pageselect" onchange="self.location.href=options[selectedIndex].value" >
  2. <OPTION value="http://www.baidu.com">百度</OPTION>
  3. <OPTION value="http://www.163.com">网易</OPTION>
  4. </select>

第三种方法:带跳转按钮

  1. <html><head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>select选择-按钮跳转</title>
  4. <script type="text/javascript">
  5. function setsubmit()
  6. {
  7. if(mylink.value == 0)
  8. window.location='http://www.baidu.com';
  9. if(mylink.value == 1)
  10. window.location='http://www.163.com';
  11. if(mylink.value == 2)
  12. window.location='http://www.sina.com';
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <select name="mylink" id="mylink">
  18. <OPTION value="0">百度</OPTION>
  19. <OPTION value="1">网易</OPTION>
  20. <OPTION value="2">新浪</OPTION>
  21. </select>
  22. <input type="button" id="btn" value="提交" onclick="setsubmit(this)" />
  23. </body>
  24. </html>

学点技术备用。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • 龙笑天 4

      还是第二种够简单~ :grin: