设为首页|加入收藏| 联系站长

网站首页工作总结

Select下拉菜单点击实现链接跳转功能的js代码

发布时间:2017/3/20 9:59:41 编辑:YAN秀 阅读( 来源:本站原创

前言

有时我们可能看到select下拉框,点击实现链接跳转功能。这种方法胜在简单实用,不用很多代码就可以实现。

HTML

我们只要写出select下拉框的格式就行,然后在其属性value中,填写上我们需要的跳转链接即可,在为其添加一个事件就可以啦!例如:

<select name="select" id="select" onchange="s_click(this)">
	<option>友情链接</option>
	<option value='http://www.91yanxiu.com'>YAN秀博客</option>
    <option value='http://wx.91yanxiu.com'>微信营销平台</option>
</select>

JS

//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); //这里修改打开连接方式
	}
}

以上我们就完成了,下拉菜单点击实现链接跳转功能。

0% (0)
0% (10)