图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 的名字,及代码中进行对应的修改(黄色的字体).
分享到:
相关推荐
### 使用Select Into与Insert Into Select进行表复制的方法 在数据库管理与操作中,`SELECT INTO`与`INSERT INTO SELECT FROM`是两种常见的用于复制或创建新表的方式。这两种语句虽然相似,但在实际使用场景中有着...
### SQL语句SELECT用法详解 #### 一、概述 SQL(Structured Query Language)是一种用于管理关系数据库的标准语言。在SQL中,`SELECT`语句是最常用的操作之一,主要用于从数据库表中检索数据。通过使用不同的子句...
本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一、设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的...
- 删除选项:`selectElement.removeChild(optionElement)`,通过`removeChild`方法删除指定的`option`元素。 3. **获取用户的选择** - `selectedIndex`属性:返回或设置被选中的选项的索引。例如,`selectElement...
本文将深入探讨 VFP 中 SQL SELECT 的用法,包括其各个子句的功能和使用技巧。 ### 简介 SQL SELECT 是用于从数据库中提取数据的关键命令,它允许用户根据特定的条件和需求定制数据输出。VFP 中的 SQL SELECT 支持...
为了提高效率和减少资源消耗,将`UPDATE`语句与`SELECT`语句相结合是一种非常实用的方法。这种方式可以实现更高效的数据处理,特别是在需要批量更新记录时。下面我们将深入探讨如何将`UPDATE`与`SELECT`结合使用,并...
在上面的例子中,我们展示了如何使用 `select()` 来检测Socket是否可读。当 `FD_ISSET(sockfd, &fdR)` 返回真时,表示Socket可读,此时我们可以进行读取操作或者接受新的连接请求。这种方法特别适用于服务器端,可以...
Linux 下 select 和 poll 的用法 在 Linux 中,select 和 poll 是两个常用的系统调用,它们用于查询设备是否可读写或是否处于某种状态。下面将详细介绍 select 和 poll 的用法。 select 函数 select 函数的作用是...
以下是对`select`命令在Linux Shell编程中用法的详细解析: ### `select`命令的基本语法 `select`命令的基本结构与`for`循环类似,但更侧重于创建菜单和接收用户输入。其基本语法如下: ```bash select WORD in ...
简要介绍了select语句的用途已经详细介绍了select的使用方法,为初学者提供借鉴
为了实现这一目标,通常会采用同步I/O模型中的多路复用技术,其中`select`函数是较为常见的一种方法。对于刚接触Socket编程的学习者来说,往往更倾向于使用如`connect`、`accept`、`recv`或`recvfrom`等阻塞调用来...
本文主要给大家介绍了关于Golang中switch和select用法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一、switch语句 switch语句提供了一个多分支条件执行的方法。每一个case可以携带一个表达式...
此为jquery.editable-select插件的使用案例,这是一款非常好用的插件,好用之处:既可下拉框选择也可手动输入,而且手动输入还能对下拉框选项进行过滤,而且还可实现一些相关事件,具体请查看官方文档。
以下是对`html:select`标签的详细解释和使用方法: ### 基本结构 `html:select`标签的基本结构如下: ```jsp <html:select property="beanProperty"> </html:select> ``` - `property="beanProperty"`: 指定...
Jsoup select选择器基本的使用方法,一般套路都是打开浏览器开发者工具,找到需要爬取的网页信息所在的网页标签,标记。然后用选择器把子标签所在的“路径”用语句拼接起来。。select(".slst.mtw>ul>li>h3>a");例如要...
### Bootstrap-select使用方法详解 首先,要使用bootstrap-select,需要在项目中引入Bootstrap以及bootstrap-select的CSS和JS文件。页面的基本结构如下: ```html ${baseURL}/Bootstrap/bootstrap/css/bootstrap....
select 的另类用法select 的另类用法select 的另类用法select 的另类用法select 的另类用法
接下来,我们将通过两个具体的示例来深入了解`select`命令的使用方法。 ##### 实例1:执行完命令不退出脚本 在这个例子中,我们创建了一个简单的菜单,用户可以选择运行不同的系统命令: ```bash #!/bin/bash PS3...