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实现表格动态分页实现代码
Jun 21 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
使用JS来动态操作css的几种方法
Dec 18 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
改造一台复古桌面收音机
2021/03/02 无线电
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python中函数参数匹配模型详解
2019/06/09 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
大学生职业生涯规划书汇总
2014/03/20 职场文书
环境日宣传活动总结
2014/07/09 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
个人道歉信大全
2019/04/11 职场文书
导游词之山东八大关
2019/12/18 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers