主页 > 教程合集 > Html/css >

给Select标签中的Option内容加链接点击实现跳转的方法

时间:2019-12-01 阅读:0

在Html中,select元素可创建单选或多选菜单。其中<select> 元素中的 <option> 标签用于定义列表中的可用选项。

给Select标签中的Option内容加链接点击实现跳转的方法

一般<option>是直接用于筛选,选中,如果我们要实现选中后立即跳转,则需要加一段js代码即可,具体方法如下。

1、Html页面代码:


<select name="select" id="select" style="height: 25px; width: 240px; line-height: 25px;" onchange="s_click(this)">
                <option>====友情链接====</option>
                <option value='http://www.baidu.com'>====xxxxxxxx====</option>
                <option value='http://www.baidu.com'>====xxxxxxxx====</option>
</select>
 

2、js代码:


<script type="text/javascript">
                //select跳页
                function s_click(obj) {
                        var num = 0;
                        for (var i = 0; i < obj.options.length; i++) {
                                if (obj.options[i].selected == true) {
                                        num++;
                                }
                        }
                        if (num == 1) {
                                var url = obj.options[obj.selectedIndex].value;
                                window.open(url); //这里修改打开连接方式
                        }
                }
</script>
 

释义:

在当前页面打开百度:


window.open("http://www.baidu.com/", "_self");
 

在当前窗口打开百度,并且使URL地址出现在搜索栏中:


window.open("http://www.baidu.com/", "_search");
 

在一个新的窗口打开百度:


window.open("http://www.baidu.com/", "_blank");
 

打开一个新的窗口,并命名为"hello":


window.open("", "hello");
 

本站所有资源均在Resource资源站有分享,你可以点击 >>> Resource 进入资源站自助提取,也可以扫描以下店铺二维码直接选购,自动极速发货

余斗微信二维码

扫描微信加好友咨询
了解更多

余斗淘宝店铺二维码

淘宝扫描二维码购买
自动发货

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2019-12-01最后更新,转载注明出处。

相关推荐

下一篇:没有了
返回顶部