Select标签加超链接的方法

2018年6月25日18:53:51 发表评论 5,467 views
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
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。中国企鹅SEO站长博客群
企鹅博客

发表评论

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