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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
javascript求日期差的方法
Mar 02 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 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知道与问问的采集插件代码
2010/10/12 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php日历制作代码分享
2014/01/20 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
python原始套接字编程示例分享
2014/02/21 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python 搜索大文件的实例代码
2019/07/08 Python
Python 变量的创建过程详解
2019/09/02 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
毕业生个人求职信范文分享
2014/01/05 职场文书
导游个人求职信范文
2014/03/23 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
从事会计工作年限证明
2015/06/23 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书