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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
jQuery ajax应用总结
Jun 02 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
php实现算术验证码功能
2018/12/05 PHP
拖拉表格的JS函数
2008/11/20 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
js实现中文实时时钟
2020/01/15 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python内存管理机制原理详解
2019/08/12 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
美国性感女装网站:bebe
2017/03/04 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
学前教育专业毕业生自荐信
2013/10/03 职场文书
劳动实践课感言
2014/02/01 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
mysql数据库入门第一步之创建表
2021/05/14 MySQL
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS