`
shirlly
  • 浏览: 1651909 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

用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 的名字,及代码中进行对应的修改(黄色的字体).

转自:http://blog.chinaunix.net/u1/36483/showart_292227.html
分享到:
评论

相关推荐

    JavaScript实现通过select标签跳转网页的方法

    在`&lt;select&gt;`标签中,通过`onchange`事件监听用户的选择变化,然后使用`location.href`属性来改变当前页面的URL,从而达到页面跳转的效果。以下是一个简单的示例: ```html &lt;select name="" onchange="location....

    HTML基础代码资源

    9. **响应式设计**:随着移动设备的普及,HTML5引入了`&lt;meta name="viewport"&gt;`标签来控制页面在不同设备上的显示,配合CSS媒体查询实现响应式设计。 10. **语义化标签**:HTML5引入了许多语义化的标签,如`&lt;header...

    用下拉框实现页面跳转

    总结来说,"用下拉框实现页面跳转"是前端开发中一个常见的需求,通过结合HTML的`&lt;select&gt;`标签和JavaScript的事件监听,我们可以轻松实现这一功能。在实际应用中,你可以根据项目需求进行定制,比如添加过渡动画、...

    HTML 中 select 的学习

    为了提高可读性和组织性,可以在`&lt;select&gt;`元素中使用`&lt;optgroup&gt;`标签来分组相关的`&lt;option&gt;`元素。`&lt;optgroup&gt;`标签包含一个`label`属性,用于定义该组的标题。 ```html &lt;select name="vehicle"&gt; &lt;optgroup ...

    JSP分页代码

    page=&lt;%= intPageCount %&gt;"&gt;尾页&lt;/a&gt;&lt;br&gt; &lt;% } %&gt;跳转到&lt;br&gt; &lt;select name="page" onChange="javascript:this.form.submit();"&gt;&lt;br&gt; &lt;% for(i=1;i&lt;=intPageCount;i++){%&gt; &lt;br&gt; &lt;option value="&lt;%= i %&gt;" &lt;% if(int...

    HTML5参考手册

    &lt;canvas&gt;标签提供了一个通过JavaScript绘制图形的能力。 &lt;figure&gt;和&lt;figcaption&gt;用于规定独立的流内容,如图像、图表、照片等,并提供标题。&lt;form&gt;标签用于创建一个表单,用于收集用户的输入。&lt;header&gt;用于定义文档...

    毕向东HTML_CSS_JavaScript教程笔记

    &lt;ol&gt;和&lt;ul&gt;中的列表项使用&lt;li&gt;标签,&lt;dl&gt;则结合&lt;dt&gt;定义项目和&lt;dd&gt;具体项目来使用。图像标签&lt;img&gt;用于插入图片,src属性指定图片路径,alt属性提供替代文本,height和width用于设定尺寸,border控制边框。图像地图...

    HTML元素参考手册

    1. `&lt;a&gt;`:定义超链接,用于创建从一个页面跳转到另一个页面的链接。`href`属性指定链接的目标URL。 2. `&lt;acronym&gt;`:表示首字母缩写词,但现代HTML5中已不再推荐使用,通常使用`&lt;abbr&gt;`代替。 3. `&lt;address&gt;`:...

    找房无忧静态页面项目资源

    `&lt;label&gt;`用于为输入字段提供描述,`&lt;select&gt;`和`&lt;option&gt;`用于创建下拉菜单,`&lt;textarea&gt;`用于多行文本输入。同时,`&lt;fieldset&gt;`和`&lt;legend&gt;`可以对相关表单元素进行分组和说明。 为了使页面更具交互性和动态效果...

    html标记有哪些类型[归类].pdf

    `&lt;div&gt;`是区隔标记,可以用来分组元素并进行布局控制,`&lt;noscript&gt;`则用于在JavaScript不支持的环境中提供备选内容。 列表标记包括有序列表`&lt;ol&gt;`和无序列表`&lt;ul&gt;`,它们的子标记`&lt;li&gt;`用于定义列表项。`&lt;dl&gt;`定义...

    html参考手册

    1. `&lt;a&gt;`:定义超链接,用于跳转到其他页面或定位页面内部位置。 2. `&lt;link&gt;`:定义文档与其他资源的关系,如样式表、图标等。 3. `&lt;nav&gt;`:定义主要的导航链接,HTML5新增。 ### 列表标签 1. `&lt;ul&gt;`:定义无序...

    HTML教程 HTML教程 HTML教程

    &lt;a&gt;还可以用于电子邮件链接或锚点链接(内部页面跳转)。 五、图像与多媒体 &lt;img&gt;元素插入图像,src属性指向图像文件,alt属性提供替代文本。&lt;audio&gt;和&lt;video&gt;元素则用于添加音频和视频,支持多种源格式。 六、...

    html比较简单的大作业

    8. **响应式设计**:随着移动设备的普及,HTML5引入了&lt;meta name="viewport"&gt;来控制页面在不同设备上的显示。配合CSS3的媒体查询@media,可以实现响应式布局,让网页适应不同屏幕尺寸。 9. **框架与布局**:HTML5...

    《Html》前端学习笔记

    超链接`&lt;a&gt;`元素使用`href`属性定义链接的目标,`target`属性控制链接打开的方式,例如`_self`、`_blank`、`_parent`和`_top`。`&lt;a&gt;`标签还有`title`属性用于鼠标悬停时显示提示信息,`alt`属性用于图片加载失败时...

    HTML代码效果对比学习光盘(中)

    &lt;form&gt;元素定义了表单,与&lt;input&gt;, &lt;textarea&gt;, &lt;select&gt;, &lt;button&gt;等元素一起,用于收集用户输入。各种类型的input标签如text, email, password, radio, checkbox等,满足不同数据输入需求。 十一、事件处理 HTML...

    HTML教程(完整版)

    &lt;a href="page2.html"&gt;跳转到第二个页面&lt;/a&gt; ``` #### 七、TABLE表格 - **表格的基本语法**: - `&lt;table&gt;`定义表格。 - `&lt;tr&gt;`定义表格行。 - `&lt;td&gt;`定义单元格。 - 示例: ```html &lt;table border="1"&gt; &lt;tr...

    HTML标记语言速查手册

    `&lt;a&gt;`标签配合`name`或`id`属性可以创建锚点,实现页面内部跳转。 五、头部元素 `&lt;meta&gt;`标签提供元数据,如字符集设置(`charset`),viewport设置(用于移动设备)。`&lt;link&gt;`引入外部资源,如CSS样式表。`&lt;style&gt;...

    HTML5常用标签大全.pdf

    - `&lt;canvas&gt;`:定义图形,可以使用JavaScript进行动态绘图。 6. **音频和视频**: - `&lt;audio&gt;`:定义声音内容,如音乐或语音。 - `&lt;source&gt;`:定义媒介源,用于多个来源的音频或视频。 - `&lt;track&gt;`:定义媒体...

    Html面试题拍照版.zip

    `&lt;a&gt;`元素配合`#`符号和ID(如`&lt;a href="#top"&gt;回到顶部&lt;/a&gt;`)可实现页面内的跳转。 9. **图片**:`&lt;img&gt;`元素插入图片,`src`属性指定图片URL,`alt`属性提供替代文本,当图片无法显示时显示该文本。 10. **表单...

Global site tag (gtag.js) - Google Analytics