Select标签加超链接的方法

www.jswusn.com HTML 2018-07-03 08:50:52 3548次浏览
网站首页 >> 技术分享 >> HTML

　　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>

　　学点技术备用。