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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
用javascript操作xml
Nov 04 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php explode函数实例代码
2012/02/27 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
static函数与普通函数有什么区别
2015/12/25 面试题
查询优化的一般准则有哪些
2015/03/08 面试题
员工培训心得体会
2013/12/30 职场文书
消防安全管理制度
2014/02/01 职场文书
金融管理应届生求职信
2014/02/20 职场文书
横幅标语大全
2014/06/17 职场文书
2015年度党员个人总结
2015/02/14 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python