Select标签加超链接的方法

jswusn.com HTML 2018-07-03 08:50:52 3222次浏览
{setimgtitle(

1530578561111712.jpg


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

  第一种方法:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>select加链接</title>
</head>
<body>
<SCRIPT language=javascript>
    <!--
    // open the related site windows
    function mbar(sobj) {
        var docurl =sobj.options[sobj.selectedIndex].value;
        if (docurl != "") {
            open(docurl,'_blank');
            sobj.selectedIndex=0;
            sobj.blur();
        }
    }
    //-->
</SCRIPT>
<Select onchange=mbar(this) name="select">
    <OPTION selected>=== 合作伙伴 ===</OPTION>
    <OPTION value="http://www.baidu.com">百度</OPTION>
    <OPTION value="http://www.163.com">网易</OPTION>
    <OPTION value="http://www.flash8.net/">闪吧</OPTION>
</Select>
</body>
</html>

  第二种方法:

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

  第三种方法:带跳转按钮

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>select选择-按钮跳转</title>
    <script type="text/javascript">
        function setsubmit()
        {
            if(mylink.value == 0)
                window.location='http://www.baidu.com';
            if(mylink.value == 1)
                window.location='http://www.163.com';
            if(mylink.value == 2)
                window.location='http://www.sina.com';
        }
    </script>
</head>
<body>
<select name="mylink" id="mylink">
    <OPTION value="0">百度</OPTION>
    <OPTION value="1">网易</OPTION>
    <OPTION value="2">新浪</OPTION>
</select>
<input type="button" id="btn" value="提交" onclick="setsubmit(this)" />
</body>
</html>

  学点技术备用。

@title='Select标签加超链接的方法')}

技术分享

苏南名片

  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2022 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号