欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 程序代码 > 在Select中给Option内容加链接实现点击实现跳转的方法
这篇文章主要为大家详细介绍了在Select中给Option内容加链接实现点击实现跳转的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

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


以上就是在Select中给Option内容加链接实现点击实现跳转的方法的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: Select option 选择跳转

上一篇如何在鼠标右键快捷菜单里添加EditPlus编辑器

下一篇织梦模板联动类别地区调用不显示第三级城市的解决方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在