在Select中给Option内容加链接实现点击即可跳转的方法

发布时间：2023-10-25 14:06:51 所属栏目：经验来源：

导读：我们经常会在网站页面中使用到Select标签，我们知道在网页的在Html中，select元素可创建单选或多选菜单。其中<select> 元素中的 <option> 标签用于定义列表中的可用选项。今天错新网就主要给大家介绍在Select中给Opt

我们经常会在网站页面中使用到Select标签，我们知道在网页的在Html中，select元素可创建单选或多选菜单。其中<select> 元素中的 <option> 标签用于定义列表中的可用选项。今天错新网就主要给大家介绍在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");

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!