用javascript 控制<select>跳转页面

先看下图:

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

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

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

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

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

中用"onsubmit"

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

a1(当页,直接跳转):

location.href=this.value;">
zol
163
sina
sohu

b1(新页面,直接打开):
window.open(this.options[this.selectedIndex].value)">
 zol
 163
 sina
 sohu

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

a2(当页,提交后跳转)
name="frm2" action="">
name="page2">
zol
163
sina
sohu

frm2.page2.options[document.frm2.page2.selectedIndex].value;"/>

b2(新页面,提交后打开)

name="frm" action="">
name="page">
zol
163
sina
sohu

frm.page.options[document.frm.page.selectedIndex].value)"/>

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

阅读(11748) | 评论(4) | 转发(0) |

1

上一篇：调用外部js文件

下一篇：javascript检查值的方法