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 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
Vue中props的使用详解
Jun 15 Javascript
解决vue项目router切换太慢问题
Jul 19 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python Tkinter简单布局实例教程
2014/09/03 Python
python实现数据写入excel表格
2018/03/25 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Django工程的分层结构详解
2019/07/18 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
用python进行视频剪辑
2020/11/02 Python
解释下面关于J2EE的名词
2013/11/15 面试题
2014升学宴答谢词
2014/01/26 职场文书
网络编辑职责
2014/03/01 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
Java死锁的排查
2022/05/11 Java/Android