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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
javascript的理解及经典案例分析
May 20 Javascript
EsLint入门学习教程
Feb 17 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 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
thinkphp学习笔记之多表查询
2014/07/28 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python复制与引用用法分析
2015/04/08 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python re模块findall()函数实例解析
2018/01/19 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python语法分析之字符串格式化
2019/06/13 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python 6种方法实现单例模式
2020/12/15 Python
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
小学生操行评语大全
2014/04/22 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android