排行榜 统计
  • 文章总数:1688 篇
  • 评论总数:5 条
  • 分类总数:8 个
  • 最后更新:昨天 21:09

用select标签实现网页跳转

本文阅读 1 分钟
首页 常用工具 正文

一、用select标签实现跳转JavaScript代码


用精简的代码来实现select标签跳转到新网页

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


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


代码分四类:

1、当前页面直接跳转:

<select name="" 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>


2、新页面弹出跳转:

<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>


3、当前页面点击按钮跳转:

<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>


4、新页面点击按钮跳转:

<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>


以上是四种常见的跳转方法。

另外还有一种当前页面跳转的代码也比较简洁:

<select name="" onchange="self.location.href=options[selectedIndex].value" >

<option value="http://www.baidu.com">百度</option>

<option value="http://www.163.com">网易</option>


</select>

相关标签:

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://typecho.firshare.cn/archives/619.html
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。避免网络欺诈,本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易,则需自行承担后果。本站在注明来源的前提下推荐原文至此,仅作为优良公众、公开信息分享阅读,不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
-- 展开阅读全文 --
2022 年值得关注的 IT 自动化趋势 
« 上一篇 09-08
网页跳转的几种方式
下一篇 » 09-08