用javascript 控制跳转页面-阿里云开发者社区

开发者社区> y0umer> 正文

用javascript 控制跳转页面

简介: 用javascript 控制跳转页面  先看下图: 图S1是用标签select 直接跳转的,即在选项中选择后直接跳转,而图S2是在选项中选择后再点击"提交"才进行跳转.然后就是跳转是当页跳转,还是用新页面打开,所以这里就出现跳转(或打开)的四种情况了(如下表): 图s1 图s2 (a1)当页...
+关注继续查看

用javascript 控制<select>跳转页面 
先看下图:

图S1是用标签select 直接跳转的,即在选项中选择后直接跳转,而图S2是在选项中选择后再点击"提交"才进行跳转.然后就是跳转是当页跳转,还是用新页面打开,所以这里就出现跳转(或打开)的四种情况了(如下表):

图s1 图s2
(a1)当页,直接跳转 (a2)当页,提交后跳转
(b1)新页面,直接打开 (b2)新页面,提交后打开

当面跳转的核心代码是:"location.href=value"

新页面打开的核心代码是:"window.open()"

而还需注意的就是javasrcipt代码的嵌入位置:(1)直接跳转或打开的javascript 代码是嵌入在<select>中的,(2)提交后跳转或新页面打开是嵌入到提交按钮中的,并且按钮不是用"submit",而是用"button",调用javascript 是用"onclick",而没有在<form>中用"onsubmit"

下面分别是四种情况的代码:

a1(当页,直接跳转):

 

<select name="qq" onchange="javascript:location.href=this.value;">
<option value="http://www.zol.com.cn" selected="selected" >zol</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>

b1(新页面,直接打开):
<select name="" onchange="javascript:window.open(this.options[this.selectedIndex].value)">
 <option value="http://www.zol.com.cn" selected="selected" >zol</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>

可以看到,直接跳转或直接打开,javascript 的代码都不需要查找标签"select"的位置,不需引用form 或 select 的名字,只是通过"this"进行当前的指定.下次像这样形式的"select",CTRL+C CRTL+V 就可以用了.

a2(当页,提交后跳转)
<form name="frm2" action="">
<select name="page2">
<option value="./date.html" selected="selected" >zol</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>


b2(新页面,提交后打开)
<form name="frm" action="">
<select name="page">
<option value="./date.html" selected="selected" >zol</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>

a2,b2跟a1,b1不同之处在于必须对form 和 select 进行命名,因为在javascript代码中需要用到其名字进行指定行为的对象.用到其它地方时,需要对form select 的名字,及代码中进行对应的修改(黄色的字体).

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
5个超炫的页面滚动 JavaScript 插件
对于很多单页面网站来说,页面滚动(Page Scrolling)技术是十分常用的。页面滚动基本上可以分为两种,一种是通过浏览器的滚动条,另外一种是根据用户的操作自动滚动。在这篇文章中,我们将介绍5个javascript插件,可以帮你轻松的创建页面滚动效果,你也就不必在重复发明轮子了,专注你的网站设计就好。
491 0
Java基础-04.总结switch,for,while,do。while跳转语句
你需要的是什么,直接评论留言。 获取更多资源加微信公众号“Java帮帮” (是公众号,不是微信好友哦) 还有“Java帮帮”今日头条号,技术文章与新闻,每日更新,欢迎阅读 学习交流请加Java帮帮交流QQ群553841695 分享是一种美德,分享更快乐! 1:switch语句(掌握) (1)格式:switch(表达式) {case 值1:语句体1;b
1907 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12052 0
旋转跳跃-学会操作String类数据 | 带你学《Java面向对象编程》之二十七
本节将带领读者完成对字符串数据之间的比较,并为读者介绍了字符串常量的概念与比较字符串数据的注意事项。
647 0
js页面跳转整理
总结一:js页面跳转1.window.location.href 方式               window.location.href="target.aspx";     2.
502 0
fbh
点击图片中的某个部分来跳转页面
img 1.1 导入一张图片 1.2 属性 src 图片地址 width 设置图片宽 height 设置图片高 border 设置图片边框 alt 定义图片描述信息 title 定义图片描述信息 usemap map标签的name #name map 2.
705 0
【shiro】2.spring整合shiro,注解控制shiro用户/角色/权限And/OR,没有权限跳转到固定页面
这几天粗浅的把shiro整合到spring中,并且注解控制shiro用户/角色/权限And/OR 步骤: 1.首先maven搭建web项目 2.创建数据库 user/role/authority 其中,role->user是一对多,role->authority是多对多 shiros.
9122 0
+关注
y0umer
高级网络安全技术员
906
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载