JavaScript实现通过select标签跳转网页的方法


Posted in Javascript onSeptember 29, 2016

本文实例讲述了JavaScript实现通过select标签跳转网页的方法。分享给大家供大家参考,具体如下:

我们经常有遇到需要用select标签跳转到新网页的情况,dw生成的代码太复杂,那么有没有精简的代码得以实现呢?经过仔细的研究找到了以下几段代码,非常不错。

话不多说,直奔主题。

当面跳转的核心代码是:"location.href=value"
新页面打开的核心代码是:"window.open()"

代码分四类:

1、当前页面直接跳转:

<select name="" onchange="javascript:location.href=this.value;">
<option value="https://3water.com" selected="selected" >3water</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>

2、新页面弹出跳转:

<select name="" onchange="javascript:window.open(this.options[this.selectedIndex].value)">
<option value="https://3water.com" selected="selected" >3water</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>

3、当前页面点击按钮跳转:

<form name="frm2" action="">
<select name="page2">
<option value="https://3water.com" selected="selected" >3water</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>
<input type="button" value="提交" onclick="javascript:location.href=document.frm2.page2.options[document.frm2.page2.selectedIndex].value;"/>
</form>

4、新页面点击按钮跳转:

<form name="frm" action="">
<select name="page">
<option value="https://3water.com" selected="selected" >3water</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>
<input type="button" value="提交" onclick="javascript:window.open(document.frm.page.options[document.frm.page.selectedIndex].value)"/>
</form>

以上是四种常见的跳转方法。

另外还有一种当前页面跳转的代码也比较简洁:

<select name="" onchange="self.location.href=options[selectedIndex].value" >
<option value="http://www.baidu.com">百度</option>
<option value="http://www.163.com">网易</option>
</select>

这个也是非常好的。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery果冻抖动效果实现方法
Jan 15 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 #Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 #Javascript
聊一聊JS中的prototype
Sep 29 #Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 #Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 #Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 #Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 #Javascript
You might like
用PHP实现维护文件代码
2007/06/14 PHP
学习ExtJS table布局
2009/10/08 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python自动化办公操作PPT的实现
2021/02/05 Python
高山背包:High Sierra
2017/11/23 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
超市业务员岗位职责
2013/12/05 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
高中生评语大全
2014/04/25 职场文书
入党介绍人评语
2014/05/06 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
公司股东合作协议书
2014/09/14 职场文书
运动会开幕式致辞
2015/07/29 职场文书
给校长的建议书范文
2015/09/14 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
学习党章心得体会2016
2016/01/15 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
python b站视频下载的五种版本
2021/05/27 Python